引入
在使用 npm 包 kd-drag-mock 之前，我们需要先安装 npm，该包可以在 Node.js 的环境中运行。安装 npm 的方法请参考 npm 官网。
安装完成 npm 之后，我们可以通过以下命令进行 kd-drag-mock 包的安装：
$ npm install kd-drag-mock
在安装完成之后，我们需要引入这个包：
import KDdragMock from 'kd-drag-mock';
使用
kd-drag-mock 主要是用来模拟鼠标拖拽行为的 API。我们可以通过以下代码来实现一个简单的拖拽交互：
-- -------------------- ---- -------
----- ---- - --------------------------------
----- ---- - --------------------------------
---------------- -
--------
---------------------
--
-------
------------------------
--
------
-------------------
--
-------------
------------------ -- --------
-----------------------
-
---在上述代码中，我们通过 getElementById() 方法获取了两个 DIV 元素，并对 div1 进行 kd-drag-mock 的绑定。接着，我们通过对象字面量的方式定义了四个回调函数，分别处理拖拽的开始、拖拽进行、拖拽结束以及放置目标的逻辑。在这个例子中，我们使用 console.log() 方法和 DOM 操作分别处理了这些事件。当拖拽对象被放置在了 div2 中后，我们将 div1 放到了 div2 的子节点列表中。
参数
kd-drag-mock() 方法接收两个参数：一个 DOM 元素，另一个是一个对象，对象中可以包含一些可选的回调函数。
DOM 元素
我们需要传入一个 DOM 元素作为第一个参数，通常是要被拖拽的 DOM 元素。
回调函数
回调函数包含以下属性：
start
拖拽开始时执行的回调函数。如果重写该方法，则在拖拽已经开始时执行。
drag
拖拽过程中执行的回调函数。如果重写该方法，则在鼠标移动时执行。
end
拖拽结束时执行的回调函数。如果重写该方法，则在鼠标抬起时执行。
drop
拖拽结束，鼠标松开时执行的回调函数。如果传递了这个回调函数，则组件会判断当前拖拽的对象释放在哪个目标下。如果释放在了一个目标下，则会把拖拽的对象插入到目标下。
参数示例
下面是一个包含所有回调函数的完整示例：
-- -------------------- ---- -------
------------------- -
------- -
------------------ -------
--
------ -
---------------------------
--
----- -
---------------- -------
--
------------ -
----------------- --------- --------
----------------------------
-
---在这个示例中，KDdragMock 绑定在 element 上，每当鼠标拖拽这个元素时，四个回调函数都会触发，并输出对应的日志。当鼠标释放并且拖拽的对象落到了一个目标的区域内时，绑定的 drop 函数会将拖拽的元素添加到目标的子元素列表中。
总结
kd-drag-mock 是一个非常方便的 NPM 包，可以增加 Web 端的交互性和响应式。在开发过程中，我们经常需要实现拖拽功能，使用这个包可以节省开发时间和提高开发效率。通过详细的介绍，相信大家已经掌握了这个包的基本使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562de81e8991b448e05cc