简介
Mobile Drag Drop 是一个简单易用的 npm 包，用于在移动端实现拖放操作。它基于原生 HTML5 Drag and Drop API，同时提供了一些便利的方法和事件。
安装
在终端程序中运行以下命令来安装 mobile-drag-drop：
npm install mobile-drag-drop
使用
通过以下三个步骤来使用 Mobile Drag Drop：
- 实例化 Mobile Drag Drop；
- 绑定容器元素；
- 配置拖放选项。
例如，我们有一个包含三个元素的容器，我们想要让其可以进行拖放操作，代码如下：
<div id="container"> <div id="item1">Item 1</div> <div id="item2">Item 2</div> <div id="item3">Item 3</div> </div>
-- -------------------- ---- ------- ------ -------------- ---- ------------------- ----- --------- - ------------------------------------- ----- --- - --- ---------------- ---------- ---------- ------ ------ ------------ -------- ------ ---------- ------ - ------------------------------ -- ---------- -------- ------ ---------- ------ - --------------------------------- -- ------- -------- ------ ---------- ------- - ---------------------------------- -------------------- -- ------------ -------- ------ ---------- ------- - ----------------------------- -- ------------ -------- ------ ---------- ------- - -------------------------------- -- ---展开代码
在上面的例子中，我们实例化了一个 MobileDragDrop 对象，然后将容器元素 container 传入到 container 属性中。 items 属性表示那些元素是可拖放的，这里我们使用了 div。
然后，我们用回调函数 onDragStart、onDragEnd 和 onDrop 来更新元素的状态和顺序。在这个例子中，当拖动开始时，我们添加了一个 .dragged 类到拖动的元素，当拖动结束时，我们移除它。通过 onDrop，我们可以将拖动的元素插入到其目标元素之后。
onDragEnter 和 onDragLeave 回调函数用于在鼠标拖动进入和离开目标元素时添加和移除 .over 类，从而提供一些视觉指导。
示例
你可以检出下面的代码片段，理解 Mobile Drag Drop 的实现：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------- ---- --- ------------ ------- ---------- - -------- ----- --------------- ------- ------------ ------- -------- ----- ----------- -------- ----------- ------ - ----- - ------ ----- ------- ----- ------- ---- -- ----------- ----- ----------- - --- --- ------- -- -- ----- ------------ ----- ----------- ------- ------- ----- - ------------- - -------- ---- - ---------- - ----------- -------- - -------- ------- ------ ---- --------------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ------ ------- --------------------------------------------------------------------- -------- ----- --------- - ------------------------------------- ----- --- - --- ---------------- ---------- ---------- ------ -------- ------------ -------- ------ ---------- ------ - ------------------------------ -- ---------- -------- ------ ---------- ------ - --------------------------------- -- ------- -------- ------ ---------- ------- - ---------------------------------- -------------------- -- ------------ -------- ------ ---------- ------- - ----------------------------- -- ------------ -------- ------ ---------- ------- - -------------------------------- -- --- --------- ------- -------展开代码
指导意义
Mobile Drag Drop 是一个使用方便、覆盖广泛的 npm 包，特别适合移动端开发。它遵循一些基本的操作流程，并提供了丰富的回调函数，可以在开发时快速地实现拖放操作。Mobile Drag Drop 可以用于许多场景，例如移动端的图片拖拽排序、拖动表格行、拖动看板任务卡片等等。
参照本文的代码和示例，你可以快速入门并掌握移动端拖放的基本流程。同时，你也可以根据需要对回调函数进行个性化的定制，以满足你的业务需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/116808
