长相困难 發表於 2022-11-8 09:23:00

React可拖拽缩放组件react-rnd

<p>react-rnd 是一个React 组件库，可以提供一个可调整大小与可拖拽的组件。<br>
<img src="https://img2022.cnblogs.com/blog/1950214/202211/1950214-20221108091238204-1993259575.webp" alt="" loading="lazy"></p>
<h3 id="一安装">一、安装</h3>
<p>使用 npm</p>
<pre><code>npm i -S react-rnd
</code></pre>
<p>使用 yarn</p>
<pre><code>yarn add react-rnd
</code></pre>
<h3 id="二使用方法">二、使用方法</h3>
<p>基本用法</p>
<pre><code>&lt;Rnd
default={{
    x: 0,
    y: 0,
    width: 320,
    height: 200,
}}
&gt;
Rnd
&lt;/Rnd&gt;
</code></pre>
<p>使用position和size的例子</p>
<pre><code>&lt;Rnd
size={{ width: this.state.width,height: this.state.height }}
position={{ x: this.state.x, y: this.state.y }}
onDragStop={(e, d) =&gt; { this.setState({ x: d.x, y: d.y }) }}
onResizeStop={(e, direction, ref, delta, position) =&gt; {
    this.setState({
      width: ref.style.width,
      height: ref.style.height,
      ...position,
    });
}}
&gt;
123
&lt;/Rnd&gt;
</code></pre>
<h3 id="三属性">三、属性</h3>
<p><strong>default</strong>: { x: number; y: number; width?: number | string; height?: number | string; };<br>
设定默认的一些属性，如初始坐标和宽高<br>
<strong>size?</strong>: { width: (number | string), height: (number | string) };<br>
组件的大小，即宽度与高度<br>
<strong>position?</strong>: { x: number, y: number };<br>
组件的坐标，即横坐标与纵坐标<br>
<strong>resizeGrid?</strong>: ;<br>
重置大小时的增量，默认为<br>
<strong>dragGrid?</strong>: ;<br>
拖拽时的增量，默认为<br>
<strong>lockAspectRatio?</strong>: boolean | number;<br>
锁定纵横比，可设置为布尔值或数字值，当设置为true时，组件会锁定纵横比，并且该值为组件初始宽高的比值；而设置为数字时，组件调整大小时会以该值作为纵横比来调整<br>
<strong>enableResizing?</strong>: ?Enable;<br>
用以设置是否可调整大小，可从组件各个方向上或整体来设置：</p>
<pre><code>export type Enable = {
bottom?: boolean;
bottomLeft?: boolean;
bottomRight?: boolean;
left?: boolean;
right?: boolean;
top?: boolean;
topLeft?: boolean;
topRight?: boolean;
} | boolean
</code></pre>
<p><strong>disableDragging?</strong>: boolean;<br>
是否禁用拖拽<br>
<strong>dragAxis?</strong>: 'x' | 'y' | 'both' | 'none'<br>
设置组件的拖拽方向<br>
<strong>bounds?</strong>: string;<br>
组件的边界：可设置为父组件的名称或者window、body或者一个选择器的名称(需要带上符号. or #)</p>
<h3 id="四回调函数">四、回调函数</h3>
<p><strong>onResizeStart?</strong>: RndResizeStartCallback; // 开始调整大小时调用</p>
<pre><code>export type RndResizeStartCallback = (
e: SyntheticMouseEvent&lt;HTMLDivElement&gt; | SyntheticTouchEvent&lt;HTMLDivElement&gt;,
dir: ResizeDirection,
refToElement: React.ElementRef&lt;'div'&gt;,
) =&gt; void;
</code></pre>
<p><strong>onResize?</strong>: RndResizeCallback; // 组件调整大小时调用</p>
<pre><code>export type RndResizeCallback = (
e: MouseEvent | TouchEvent,
dir: ResizeDirection,
refToElement: React.ElementRef&lt;'div'&gt;,
delta: ResizableDelta,
position: Position,
) =&gt; void;
</code></pre>
<p><strong>onResizeStop?</strong>: RndResizeCallback; // 组件停止调整大小时调用</p>
<pre><code>export type RndResizeCallback = (
e: MouseEvent | TouchEvent,
dir: ResizeDirection,
refToElement: React.ElementRef&lt;'div'&gt;,
delta: ResizableDelta,
position: Position,
) =&gt; void;
</code></pre>
<p><strong>onDragStart</strong>: DraggableEventHandler; // 组件开始拖拽时调用</p>
<pre><code>type DraggableData = {
node: HTMLElement,
x: number,
y: number,
deltaX: number, deltaY: number,
lastX: number, lastY: number
};

type DraggableEventHandler = (
e: SyntheticMouseEvent | SyntheticTouchEvent, data: DraggableData,
) =&gt; void | false;
</code></pre>
<p><strong>onDrag</strong>: DraggableEventHandler; // 组件拖拽时调用</p>
<pre><code>type DraggableData = {
node: HTMLElement,
x: number,
y: number,
deltaX: number, deltaY: number,
lastX: number, lastY: number
};

type DraggableEventHandler = (
e: SyntheticMouseEvent | SyntheticTouchEvent, data: DraggableData,
) =&gt; void | false;
</code></pre>
<p><strong>onDragStop</strong>: DraggableEventHandler; // 组件停止拖拽时调用</p>
<pre><code>type DraggableData = {
node: HTMLElement,
x: number,
y: number,
deltaX: number, deltaY: number,
lastX: number, lastY: number
};

type DraggableEventHandler = (
e: SyntheticMouseEvent | SyntheticTouchEvent, data: DraggableData,
) =&gt; void | false;
</code></pre>
<h3 id="实例api">实例API</h3>
<p><strong>updateSize</strong>(size: { width: string | number, height: string | number })<br>
用以调整组件的大小<br>
<strong>updatePosition</strong>({ x: number, y: number }): void<br>
用以调整组件的位置<br>
<strong>allowAnyClick?</strong>: boolean<br>
如果设置为true，则允许非左键点击拖拽</p>
<h3 id="附">附：</h3>
<p>github地址：https://github.com/bokuweb/react-rnd</p>
<p>如果仅需实现拖拽功能，无需缩放功能，也可使用 react-draggable 组件</p><br><br>
来源：https://www.cnblogs.com/ZerlinM/p/16868576.html
頁: [1]
查看完整版本: React可拖拽缩放组件react-rnd