前言
在 Web 开发中，拖放操作是一个很常见的需求，比如拖拽表格行、拖拽图片等等。虽然 HTML5 提供了一些原生的 API 可以实现拖放操作，但是它们往往过于底层，需要自己编写大量的代码来实现一些常见的操作。为了方便开发者，许多 UI 框架和库都提供了拖放功能的封装，其中 @lumino/dragdrop 是一个比较优秀的 npm 包，它提供了一套简洁易用、功能全面的拖放 API。本文将介绍如何使用 @lumino/dragdrop。
安装和引入
@lumino/dragdrop 是一个 npm 包，因此需要使用 npm 或者 yarn 来安装：
npm install --save @lumino/dragdrop
然后在需要使用的地方引入：
import { Drag, Drop } from '@lumino/dragdrop';Drag、Drop 对象
@lumino/dragdrop 提供了两个核心的对象：Drag 和 Drop。它们分别代表着拖拽源和拖放目标。通过 Drag 和 Drop 对象，可以实现拖拽元素的注册、开始、移动和结束等操作。下面是一个简单的 Drag 和 Drop 对象的示例代码：
-- -------------------- ---- -------
------ - ----- ---- - ---- -------------------
-- -------
----- ---- - --- ------
-- --- --- --
----- ---------------------------------------
-- ---------------
--------- -------------
-- ------
----- ------ -------
---
-- --------
----- ---- - --- ------
-- ---- --- --
----- ---------------------------------------
-- ---------
-------- ---------------
-- ---------------
-------- -- -- -
---------------------
--
-- ---------------
-------- -- -- -
---------------------
--
-- -----------------
------- -- -- -
--------------------
--
-- -------------
------- ------ ------ -- -
------------------- ------
--
---
-- ------
-------------上述代码首先创建了一个 Drag 对象和一个 Drop 对象，分别代表了拖拽源和拖放目标。在 Drag 对象的配置中，指定了拖拽的 DOM 元素、拖放类型（mimeType）以及拖拽数据。在 Drop 对象的配置中，指定了拖放的 DOM 元素、允许的拖放类型（accepts）、拖进/拖离/拖过/放置时触发的回调函数。最后调用 start() 方法开始拖拽操作。
拖拽数据
在拖拽元素时，可以在 Drag 对象的配置中定义一个 data 属性来指定拖拽数据。对于字符串、数字、布尔等基本类型的数据，可以直接传入；对于复杂的数据，需要进行序列化和反序列化。比如下面这个示例中，将一个对象通过 JSON.stringify() 方法进行序列化，然后传入到 Drag 对象的 data 属性：
-- -------------------- ---- ------- ------ - ---- - ---- ------------------- ----- --- - - ----- ----- ---- -- -- ----- ---- - --- ------ ----- --------------------------------------- --------- ------------------- ----- -------------------- --- -------------
然后在 Drop 对象的 onDrop 回调函数中通过 JSON.parse() 方法进行反序列化：
-- -------------------- ---- -------
------ - ---- - ---- -------------------
----- ---- - --- ------
----- ---------------------------------------
-------- ---------------------
------- ------ ------ -- -
----- --- - -----------------
-----------------
--
---拖拽约束
有时候需要对拖拽操作进行一些约束，比如只能在指定的区域进行拖拽、只能拖动到某个位置等等。@lumino/dragdrop 提供了一些相应的方法来实现这些功能。下面是一个实现拖拽区域约束的示例代码：
-- -------------------- ---- -------
------ - ----- ------------- - ---- -------------------
----- ---- - --- ------
----- ---------------------------------------
--------- -------------
----- ------ -------
---
----- ---- - --- ------
----- ---------------------------------------
-------- ---------------
-------- -- -- -
---------------------
--
-------- -- -- -
---------------------
--
------- -- -- -
--------------------
--
------- ------ ------ -- -
------------------- ------
--
---
-- -------- ---- -----
------------------- -----------
-------------在上面的代码中，使用了 constrainDrag() 方法将拖拽源的运动范围限制在了 drop 区域内。constrainDrag() 方法的第一个参数是 Drag 对象，第二个参数是约束的位置。
总结
@lumino/dragdrop 是一个非常优秀的 npm 包，提供了一套简单易用、功能全面的拖放 API。通过本文的介绍，相信大家已经了解了如何使用 Drag 和 Drop 对象，以及如何使用一些附加的方法来实现约束等功能。在实际的开发中，可以根据需求进一步扩展和封装，以满足不同的场景需要。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f1f7aeb403f2923b035c5ee