介绍
npm 包 uk-dnd 是一个 React 的拖放组件库，它提供了拖放功能的实现，可以用于构建所有可能用到的拖放功能。它的使用非常简单，但是有些细节需要注意。
安装
您可以通过 npm 安装 uk-dnd 包。
npm install uk-dnd
如何使用
基础用法
使用 uk-dnd 的基础用法很简单，只需使用它提供的 Drag 和 Drop 组件包装您的组件即可。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ---- - ---- ---------
------ ------- -------- ----- -
------ -
-----
----- -------------- -- -------------------
----- ------- ----- ------- ---
-----------------
-------
-------
------
--
-这个例子只是提供了一个基本的拖放功能，当您拖动一个元素到 Drop 组件上，它将输出被拖动的元素的名称。
Drag 组件
Drag 组件是拖放组件的一部分，它必须用于包装您要拖动的元素。
item属性：可以是任意普通类型的对象，表示要传递给 Drop 组件的元素。onBegin和onEnd属性：是function类型的回调函数，表示拖动开始和拖动结束时的回调函数。operation属性：用于区分不同类型的 Drag 组件，如果一个 Drop 组件只接受 operation 为 'PT' 的 Drag 组件，那么 Drop 组件将不会接受 operation 不为 'PT' 的 Drag 组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ---- - ---- ---------
------ ------- -------- ----- -
------ -
-----
----- -------------- -- -------------------
----- ------- ----- ------- -- -------------- ----------- -- -----------------------
-----------------
-------
-------
------
--
-Drop 组件
Drop 组件是拖放组件的一部分，它必须用于包装您要拖放的元素。Drop 组件的属性是用于设置在拖放事件发生时，Drop 组件应该如何响应拖放事件。
onDrop属性：一个函数，当拖放发生时将被调用，参数是拖放的元素。operation属性：用于区分不同类型的 Drag 组件，如果一个 Drop 组件只接受 operation 为 'PT' 的 Drag 组件，那么 Drop 组件将不会接受 operation 不为 'PT' 的 Drag 组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ---- - ---- ---------
------ ------- -------- ----- -
----- ---------- - ------ -- -
------------------
--
------ -
-----
----- ------------------- ---------------
----
-------
------
--
-自定义拖动元素
Drag 组件接受一个自定义的函数作为子元素，可以在这个自定义组件中设置拖动的表现。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ---- - ---- ---------
------ ------- -------- ----- -
------ -
-----
----- -------------- -- -------------------
----- ------- ----- ------- ---
------------- -- -
---- -------- -------- ---------- - --- - --- ---
------
------
--
-------
-------
------
--
-限制区域
除了使用 Drop 组件接受拖动元素以外，利用其它组件也可以应用 uk-dnd 包中的拖放功能。例如实现一个拖动滑块的功能。
-- -------------------- ---- -------
------ ------ - ------- --------- --------- - ---- --------
------ - ---- - ---- ---------
------ ------- -------- ----- -
----- --------- - -------------
----- ----------- ------------- - ------------
----- ------------- --------------- - ------------
------------ -- -
--------------------------------------------
-- ----
----- ---------- - ------- -- -
----- ------- - ------------- - -----------------------------
-- -------- -- -- -
------------------
- ---- -- -------- -- ---------- -
--------------------------
- ---- -
------------------------
-
--
------ -
-----
---- --------------- -------- ------ ------- ------- ------- ---------------- ------ -- ---------------------
----- ------- ----- ---- ---
------------- -- -
----
--------
------ -------
------- -------
---------------- ---------- - ----- - -------
------------- ------
--------- -----------
---- --------
----- -------------------
--
--
--
-------
------
------
--
-结论
uk-dnd 是一个很好的 React 的拖放组件包，在实际项目中使用非常方便。在此提供提供了基础的使用方法和实例，难免有所遗漏，使用时还需要根据具体的业务进行动态调整。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005606681e8991b448de859