npm 包 @wootencl/react-draggable 使用教程

简介

@wootencl/react-draggable 是一个 React 拖拽组件，可用于实现元素的可拖拽、可移动等效果。此 npm 包提供了基础的拖拽功能，并支持限制拖拽元素的范围、拖拽时的限制条件、拖拽结束后的回调函数等常见功能。

安装

你可以通过 npm 安装此包：

npm install @wootencl/react-draggable --save

基本用法

1. 导入组件：

   import Draggable from '@wootencl/react-draggable';

2. 使用组件：

   <Draggable>
     <div>这是一个可拖拽的元素</div>
   </Draggable>

此时，页面上就会出现一个可拖拽的元素。你可以拖动该元素到任意位置，并松开鼠标时该元素就会定位到此处。下面介绍一些常见的功能。

限制拖拽范围

你可以在组件中使用 bounds 属性来指定拖拽元素的范围。例如，你可以将该元素限制在其父元素内：

<Draggable bounds="parent">
  <div>这是一个可拖拽的元素</div>
</Draggable>

也可以将其限制在指定的区域内：

<Draggable bounds={{left: 0, top: 0, right: 500, bottom: 500}}>
  <div>这是一个可拖拽的元素</div>
</Draggable>

请注意，当使用 bounds 时，不要忘记设置被限制的元素的 CSS position 样式。例如，在上例中，你需要为该元素添加如下样式：

div {
  position: absolute;
}

拖拽限制条件

你可以在组件中使用 axis 属性来指定拖拽元素只能在指定的方向上移动。例如，你可以仅允许水平移动：

<Draggable axis="x">
  <div>这是一个可拖拽的元素，仅允许水平移动</div>
</Draggable>

也可以仅允许垂直移动：

<Draggable axis="y">
  <div>这是一个可拖拽的元素，仅允许垂直移动</div>
</Draggable>

拖拽结束后的回调函数

你可以在组件中使用 onStop 属性来指定拖拽结束后的回调函数。例如，你可以在拖拽结束时输出当前位置信息：

<Draggable onStop={(e, data) => console.log(data)}>
  <div>这是一个可拖拽的元素</div>
</Draggable>

在此例中，e 为拖拽事件，data 包含了当前元素的位置信息和尺寸信息。

完整示例代码

完整示例代码如下：

-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- ----------------------------

------ ------- -------- ----- -
  ------ -
    ---------- --------------- ----------- ----- -- -------------------
      ---- -------- ------ ---- ------- ---- ---------------- ------ --------- ---------- ---
        ----------
      ------
    ------------
  --
-

这段代码将渲染一个红色的正方形元素，且该元素可在父元素内任意拖拽，并在拖拽结束后输出位置信息。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5651ab1864dac66b7e