Слияние кода завершено, страница обновится автоматически
Изменяемый размер и возможность перетаскивания компонента для React.
A resizable and draggable component for React.
https://codesandbox.io/s/xpm699v4lp
CodeSandbox(with default)
CodeSandbox(with size and position)
CodeSandbox(with typescript)
CodeSandbox(with hooks)
npm i -S react-rnd
yarn add react-rnd
default
<Rnd
default={{
x: 0,
y: 0,
width: 320,
height: 200,
}}
>
Rnd
</Rnd>
position и size
<Rnd
size={{ width: this.state.width, height: this.state.height }}
position={{ x: this.state.x, y: this.state.y }}
onDragStop={(e, d) => { this.setState({ x: d.x, y: d.y }) }}
onResizeStop={(e, direction, ref, delta, position) => {
this.setState({
width: ref.style.width,
height: ref.style.height,
...position,
});
}}
>
001
</Rnd>
default: { x: number; y: number; width?: number | string; height?: number | string; };
Свойство width и height используется для установки размера компонента по умолчанию.
Например, можно установить 300, '300px', 50%.
Если опущено, устанавливается 'auto'.
Свойство x и y используется для установки положения компонента по умолчанию.
size?: { width: (number | string), height: (number | string) };
Свойство size используется для установки размера компонента.
Например, можно установить 300, '300px', 50%.
Используйте size, если вам нужно самостоятельно управлять состоянием размера.
position?: { x: number, y: number };
Свойство position используется для установки позиции компонента.
Используйте position, если вам необходимо самостоятельно контролировать состояние размера.
см. следующий пример.
<Rnd
size={{ width: this.state.width, height: this.state.height }}
position={{ x: this.state.x, y: this.state.y }}
onDragStop={(e, d) => { this.setState({ x: d.x, y: d.y }) }}
onResize={(e, direction, ref, delta, position) => {
this.setState({
width: ref.offsetWidth,
height: ref.offsetHeight,
...position,
});
}}
>
001
</Rnd>
className?: string;
Свойство className используется для задания пользовательского className компонента.
style?: { [key: string]: string };
Свойство style используется для задания пользовательского стиля компонента.
minWidth?: number | string;
Свойство… minWidth свойство используется для установки минимальной ширины компонента. Например, можно установить 300, '300px', 50%.
Свойство minHeight используется для установки минимальной высоты компонента. Например, можно установить 300, '300px', 50%.
Свойство maxWidth используется для установки максимальной ширины компонента. Например, можно установить 300, '300px', 50%.
Свойство maxHeight используется для установки максимальной высоты компонента. Например, можно установить 300, '300px', 50%.
Свойство resizeGrid используется для указания приращений, к которым должно привязываться изменение размера. По умолчанию [1, 1].
Свойство dragGrid используется для указания приращений, к которым должно привязываться перемещение. По умолчанию [1, 1].
Свойство lockAspectRatio используется для блокировки соотношения сторон. Установите значение true, чтобы заблокировать соотношение сторон на основе исходного размера. Установите числовое значение, чтобы зафиксировать конкретное соотношение сторон (например, 16/9). Если установлено числовое значение, убедитесь, что вы установили начальную высоту/ширину с правильным соотношением сторон. Если не указано, установите false.
Свойство lockAspectRatioExtraWidth позволяет компоненту с изменяемым размером сохранять соотношение сторон плюс дополнительную ширину. Например, видео может отображаться в формате 16:9 с боковой панелью шириной 50 пикселей. Если не указано, установите 0.
Указывает масштаб холста, который вы перетаскиваете или изменяете размер этого элемента. Это позволяет, например, получить правильные дельты перетаскивания / изменения размера, когда вы увеличиваете или уменьшаете масштаб с помощью преобразования или матрицы в родительском элементе этого элемента. Если не указано, установите значение 1.
Свойство lockAspectRatioExtraHeight позволяет компоненту с изменяемым размером сохранять соотношение сторон плюс дополнительная высота. Например, видео может отображаться в соотношении сторон 16:9 с заголовком высотой 50 пикселей. Если не указано, установите 0.
Задаёт селектор, который будет использоваться в качестве дескриптора, инициирующего перетаскивание. Пример: handle.
Свойство resizeHandleStyles используется для переопределения стиля одного или нескольких дескрипторов изменения размера. Только указанная ось будет иметь заменённый стиль дескриптора. Если вы укажете значение для right, оно полностью заменит стили для дескриптора изменения размера справа, но другие дескрипторы по-прежнему будут использовать стили по умолчанию.
export type HandleStyles = {
bottom?: React.CSSProperties,
bottomLeft?: React.CSSProperties,
bottomRight?: React.CSSProperties,
left?: React.CSSProperties,
right?: React.CSSProperties,
top?: React.CSSProperties,
topLeft?: React.CSSProperties,
topRight?: React.CSSProperties
}
Свойство resizeHandleClasses используется для задания className одного или нескольких дескрипторов изменения размера.
type HandleClasses = {
bottom?: string;
bottomLeft?: string;
bottomRight?: string;
left?: string;
right?: string;
top?: string;
topLeft?: string;
topRight?: string
}
Свойство resizeHandleComponent позволяет передать пользовательский компонент React в качестве дескриптора изменения размера.
type HandleComponent = {
top?: React.ReactElement<any>;
right?: React.ReactElement<any>;
bottom?: React.ReactElement<any>;
left?: React.ReactElement<any>;
topRight?: React.ReactElement<any>;
bottomRight?: React.ReactElement<any>;
bottomLeft?: React.ReactElement<any>;
topLeft?: React.ReactElement<any>
}
Свойство resizeHandleWrapperClass используется для задания имени класса css для элемента оболочки дескриптора изменения размера (span).
Свойство resizeHandleWrapperStyle используется для задания стиля css для элемента оболочки дескриптора изменения размера (span).
Свойство enableResizing используется для включения возможности изменения размера. Разрешение компонента.
Разрешение изменения размера в направлениях top, right, bottom, left, topRight, bottomRight, bottomLeft, topLeft. Если опущено, все изменения размера разрешены.
Если вы хотите разрешить изменение размера только вправо, установите { top:false, right:true, bottom:false, left:false, topRight:false, bottomRight:false, bottomLeft:false, topLeft:false }.
export type Enable = {
bottom?: boolean;
bottomLeft?: boolean;
bottomRight?: boolean;
left?: boolean;
right?: boolean;
top?: boolean;
topLeft?: boolean;
topRight?: boolean;
} | boolean
disableDragging?: boolean;
Свойство disableDragging полностью отключает перетаскивание.
cancel?: string;
Свойство cancel отключает и указывает селектор для предотвращения инициализации перетаскивания (например, .body).
dragAxis?: 'x' | 'y' | 'both' | 'none'
Направление разрешённого движения (перетаскивания) ('x','y','both','none').
bounds?: string; | Element
Определяет границы перемещения. Принимаемые значения:
parent ограничивает перемещение в пределах offsetParent узла (ближайший узел с позицией relative или absolute)window, body, селектор типа .fooClassName илиElement.enableUserSelectHack?: boolean;
По умолчанию мы добавляем атрибуты 'user-select:none' в тело документа, чтобы предотвратить некрасивый выбор текста во время перетаскивания. Если это вызывает проблемы для вашего приложения, установите значение false.
scale?: number;
Указывает масштаб холста, который вы изменяете размер и перетаскиваете этот элемент. Это позволяет, например, получить правильные дельты изменения размера и перетаскивания, когда вы увеличиваете или уменьшаете масштаб с помощью преобразования или матрицы в родительском элементе этого элемента.
Если опущено, установите 1.
onResizeStart?: RndResizeStartCallback;
Тип RndResizeStartCallback ниже.
export type RndResizeStartCallback = (
e: SyntheticMouseEvent<HTMLDivElement> | SyntheticTouchEvent<HTMLDivElement>,
dir: ResizeDirection,
refToElement: React.ElementRef<'div'>,
) => void;
Вызывается при начале изменения размера изменяемого компонента.
onResize?: RndResizeCallback;
RndResizeCallback тип ниже.
export type RndResizeCallback = (
e: MouseEvent | TouchEvent,
dir: ResizeDirection,
refToElement: React.ElementRef<'div'>,
delta: ResizableDelta,
position: Position,
) => void;
Вызывается, когда изменяемый компонент изменяет размер.
onResizeStop?: RndResizeCallback;
RndResizeCallback тип ниже.
export type RndResizeCallback = (
e: MouseEvent | TouchEvent,
dir: ResizeDirection,
refToElement: React.ElementRef<'div'>,
delta: ResizableDelta,
position: Position,
) => void;
Вызывается, когда изменение размера изменяемого компонента останавливается.
onDragStart: DraggableEventHandler;
Обработчик, вызываемый при перетаскивании.
type DraggableData = {
node: HTMLElement,
x: number,
y: number,
deltaX: number, deltaY: number,
lastX: number, lastY: number
};
type DraggableEventHandler = (
e: SyntheticMouseEvent | SyntheticTouchEvent, data: DraggableData,
) => void | false;
onDrag: DraggableEventHandler;
onDrag вызывается со следующими параметрами:
type DraggableData = {
node: HTMLElement,
x: number,
y: number,
deltaX: number, deltaY: number,
lastX: number, lastY: number
};
type DraggableEventHandler = (
e: SyntheticMouseEvent | SyntheticTouchEvent, data: DraggableData,
) => void | false;
onDragStop: DraggableEventHandler;
onDragStop вызывается при остановке перетаскивания.
type DraggableData = {
node: HTMLElement,
x: number,
y: number,
deltaX: number, deltaY: number,
lastX: number, lastY: number
};
type DraggableEventHandler = (
e: SyntheticMouseEvent | SyntheticTouchEvent, data: DraggableData,
) => void | false;
updateSize(size: { width: string | number, height: string | number })
Обновить размер компонента. Например, можно установить 300, '300px', 50%. Данный фрагмент написан на языке JavaScript.
this.rnd.updateSize({ width: 200, height: 300 });
}
render() {
return (
<Rnd ref={c => { this.rnd = c; }} ...rest >
example
</Rnd>
);
}
...
UpdatePosition({ x: number, y: number }): void
Обновление позиции компонента. Свойства grid и bounds игнорируются при вызове этого метода.
class YourComponent extends Component {
...
update() {
this.rnd.updatePosition({ x: 200, y: 300 });
}
render() {
return (
<Rnd ref={c => { this.rnd = c; }} ...rest >
example
</Rnd>
);
}
...
}
allowAnyClick?: boolean
Если установлено значение true, позволит перетаскивать при кликах не левой кнопкой мыши.
npm t
Если у вас есть запрос на функцию, пожалуйста, добавьте его как проблему или сделайте запрос на вытягивание.
Если вы обнаружили ошибку, пожалуйста, воспроизведите её в CodeSandbox, чтобы помочь нам легко изолировать её.
— Обновление re-resizable до версии 6.9.17.
— Исправления #942, определение обратных ссылок inline для работы с последними версиями Next.js / React.
— Обновление re-resizable до версии 6.9.14.
— Исправлена ошибка, maxHeight не работает с % #914.
— Обновление re-resizable до версии 6.9.11.
— Обновление react-draggable до версии 4.4.6.
— Исправлена ошибка, неправильное положение в onDrag #910.
— Поддержка элемента для границ.
— Обновление re-resizable до версии 6.9.6.
— Добавление peer deps.
— Обновление re-resizable до версии 6.9.2.
— Обновление react-draggable до v4.4.4.
— Обновление re-resizable до версии 6.9.1.
— Исправлен контроль границ с заблокированным соотношением сторон (полностью исправляет #209).
— Исправлена ошибка, проблема верхнего и левого изменения размера, вызванная «позицией» #792.
— Исправлена ошибка положения обратного вызова при указании dragAxis.
— Исправлена проблема с мерцанием при включении dragAxis и изменении размера компонента #780.
— Исправлена ошибка: если установить minWidth или minHeight с помощью px, изменение размера не работает. #739
— Обновление react-draggable до версии v4.4.3.
— Добавлены реквизиты allowAnyClick.
— Добавлены реквизиты nodeRef.
— Понижение версии react-draggable до версии v4.2.0 #690.
— Обновление react-draggable до версии v4.3.1.
— Обновление re-resizable до версии v6.3.2.
— Незначительное исправление ошибки с переадресацией отмены указания события onDrag. (#667)
— Исправление #641 без возникновения других проблем с типизацией.
— Исправлена ошибка, react-draggable не связывается с rollup #641.
— Исправлена ошибка, поле перемещается при изменении размера #622.
— Исправлена ошибка, позиция неверна при onResize #618.
— Обновление re-resizable до версии 6.1.1. — Обновление react-draggable до версии 4.1.0.
— Обновление re-resizable до версии 6.1.0.
— Реализовать resizeHandleComponent #591. — Обновить зависимость react-draggable до версии v4.
И так далее. onMouseDown={...} />
dragHandleClassName automatically, please pass string (i.e handle).extendsProps. Please add extends props directly. i.e) <Rnd data-foo="42" />.z props. Please add zIndex via style props. i.e) <Rnd style={{ zIndex: 9 }} />.re-resizable to fix percentage size and bare behavior.typescript instead of flowype.<div />, isMounted state and setParentPosition().props,children to dummy <div> to render children in first.fix: isMounted and (!this.state.isMounted) return <div /> line #356
enableUserSelectHack?: boolean;.extendProps is not passed correctly.bounds is not work correctly. (#162)size.position.default instead of x, y, width, height.resizeHandleWrapperClass and resizeHandleWrapperStyle.default and add x, y, width, height.dragHandlersXXXX and resizeHandlersXXXX props to dragHandleXXXX and resizeHandleXXXX.normal to cursor style when dragHandlerClassName is not empty.relative when component will update.top: 0, left: 0.relative when parent position equals static.react-draggable v3, flow-bin v0.53, and other...)z props is not applied to state.extendsProps. #129disableDragging props.updateZIndex.updateSize.react-draggable.Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )