简介
@wootencl/react-draggable 是一个 React 拖拽组件，可用于实现元素的可拖拽、可移动等效果。此 npm 包提供了基础的拖拽功能，并支持限制拖拽元素的范围、拖拽时的限制条件、拖拽结束后的回调函数等常见功能。
安装
你可以通过 npm 安装此包：
--- ------- ------------------------- ------
基本用法
导入组件：
------ --------- ---- ----------------------------
使用组件：
----------- --------------------- ------------
此时，页面上就会出现一个可拖拽的元素。你可以拖动该元素到任意位置，并松开鼠标时该元素就会定位到此处。下面介绍一些常见的功能。
限制拖拽范围
你可以在组件中使用 bounds 属性来指定拖拽元素的范围。例如，你可以将该元素限制在其父元素内：
---------- ---------------- --------------------- ------------
也可以将其限制在指定的区域内：
---------- -------------- -- ---- -- ------ ---- ------- ------ --------------------- ------------
请注意，当使用 bounds 时，不要忘记设置被限制的元素的 CSS position 样式。例如，在上例中，你需要为该元素添加如下样式：
--- - --------- --------- -
拖拽限制条件
你可以在组件中使用 axis 属性来指定拖拽元素只能在指定的方向上移动。例如，你可以仅允许水平移动：
---------- --------- ----------------------------- ------------
也可以仅允许垂直移动：
---------- --------- ----------------------------- ------------
拖拽结束后的回调函数
你可以在组件中使用 onStop 属性来指定拖拽结束后的回调函数。例如，你可以在拖拽结束时输出当前位置信息：
---------- ----------- ----- -- ------------------- --------------------- ------------
在此例中，e 为拖拽事件，data 包含了当前元素的位置信息和尺寸信息。
完整示例代码
完整示例代码如下：
------ ----- ---- --------
------ --------- ---- ----------------------------
------ ------- -------- ----- -
------ -
---------- --------------- ----------- ----- -- -------------------
---- -------- ------ ---- ------- ---- ---------------- ------ --------- ---------- ---
----------
------
------------
--
-这段代码将渲染一个红色的正方形元素，且该元素可在父元素内任意拖拽，并在拖拽结束后输出位置信息。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b5651ab1864dac66b7e