什么是 drop-plugin？
drop-plugin 是一个可以让用户在前端页面中随意拖拽元素的 npm 包。
如何安装？
使用 npm 安装：
npm install drop-plugin --save
使用方法
HTML
首先，在你的 html 文件中，你需要将你想要添加拖拽功能的元素设置为可拖拽的。例如：
<div id='dragElement'>我可以被拖动</div>
Import
在 javascript 文件的顶部，导入 drop-plugin：
import DropPlugin from 'drop-plugin';
实例化
然后在 js 文件中实例化 drop-plugin：
const dropElement = document.getElementById('dragElement');
const dropPlugin = new DropPlugin(dropElement);配置选项
你可以配置一些选项来调整拖拽元素的行为。例如，你可以防止拖拽元素超出其父元素的页面区域：
const dropPlugin = new DropPlugin(dropElement, {
boundaryEl: dropElement.parentElement,
});事件监听
监听插件的四个拖拽事件：dragstart、drag、dragend、drop：
-- -------------------- ---- ------- ----------------------------------------- ---------- - -- ---- ---- ---- --- ------------------------------------ ---------- - -- ---- ---- ---- --- --------------------------------------- ---------- - -- ---- ---- ---- --- ------------------------------------ ---------- - -- ---- ---- ---- ---
完整示例
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- -------------------
----- ---------------------------- ------------------
------------------ ------------
------- --------------
------ ---------- ---- --------------------------------------------------------
----- ----------- - ---------------------------------------
----- ---------- - --- ----------------------- -
----------- --------------------------
---
----------------------------------------- --------------- -
------------------------ -------
---
------------------------------------ --------------- -
------------------- -------
---
--------------------------------------- --------------- -
---------------------- -------
---
------------------------------------ --------------- -
------------------- -------
---
---------
-------
---- -
-------- -----
---------------- -------
------------ -------
------- ------
------- --
----------------- ------
-
------------ -
----------------- ------
-------- -----
------- -----
-
--------
-------
------
---- -----------------------------
-------
-------结论
这是一个简单而功能强大的 npm 包，可以让您的前端页面拥有与众不同的功能。希望此教程可以帮助你开始在你的项目中使用 drop-plugin。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005670f81e8991b448e34d9