什么是 drag-drop.min.js?
drag-drop.min.js 是一个基于 JavaScript 的 npm 包，用于处理拖放操作。它提供了一套简易的 API，可以让您轻松地将拖动操作应用到您的 Web 应用程序中。
安装
使用 npm 安装 drag-drop.min.js：
npm install drag-drop.min.js --save
示例
接下来我们将介绍一些 drag-drop.min.js 的示例，以便您更好地理解它的使用方法。
基本示例
<div id="drag-element">将此文本框拖动到下面的文本框中</div> <div id="drop-element">拖放文本框到这里</div>
// 初始化拖放
var drag = new DragDrop('#drag-element', {
target: '#drop-element',
onDrop: function() {
alert('文本框已经拖放成功!');
}
});在此示例中，我们定义了两个 div 元素，一个拖拽元素，一个目标元素。当拖拽元素被拖放到目标元素时，会触发 onDrop 回调函数，并弹出一个提示框。
拖放排序
<ul id="sortable-list">
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
<li>列表项 4</li>
<li>列表项 5</li>
</ul>// 初始化拖放排序
var sort = new DragDrop('#sortable-list li', {
isSortable: true
});在此示例中，我们创建了一个可拖放排序的列表。我们传递了 isSortable 参数来启用排序功能。
自定义样式
-- -------------------- ---- -------
----- ---------------- --------------- -------------------------
---- --------------------------
---- ---------------------------- -------
---- ---------------------------- -------
---- ---------------------------- -------
---- ---------------------------- -------
---- ---------------------------- -------
-------- -------------------- ---- -------
-- --------
--- ----------- - --- ------------------------------ -
------- ---------------------
------------ ---------- -
------------------------------------------
--
---------- ---------- -
---------------------------------------------
-
---在此示例中，我们为拖放元素添加了一个自定义样式。我们传递了 onDragStart 和 onDragEnd 回调函数来添加和删除 drag-drop-active 类。我们还将 target 参数设置为父元素，以限制拖放操作。
总结
至此，我们已经学习了基本的 drag-drop.min.js 使用方法。您现在应该感到更加自信，以便将拖放操作应用到您的 Web 应用程序中。如果您有任何疑问，请随时查阅官方文档以获取更多指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc5967216659e2443af