简介
Boxpusher 是一个简单易用的 npm 包，可以帮助开发者实现网页元素的拖拽和放置功能。Boxpusher 可以方便地应用于前端开发中的各类场景，如弹窗、可拖拽列表等。
安装
可以通过 npm 进行安装，打开终端窗口输入以下命令：
npm install boxpusher
使用教程
基础用法
- 将 boxpusher 引入到项目中。
import Boxpusher from 'boxpusher';
- 创建一个父容器和几个子元素。
<div id="container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div>
- 初始化 Boxpusher，并传入父容器和子元素。
const container = document.getElementById('container');
const boxes = container.querySelectorAll('.box');
new Boxpusher(container, boxes);现在你就可以通过鼠标对子元素进行拖动，并且可以将子元素放到其他位置。
配置参数
Boxpusher 支持一些配置参数，可以用来进行一些定制化操作。
- 传入一个配置对象。
new Boxpusher(container, boxes, options);
- 配置项
| 属性名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| handle | string | 触发拖拽的元素的 CSS 选择器 | null |
| dropZone | string | 拖拽元素可以放置的区域的 CSS 选择器 | null |
| onDragStart | function | 拖拽开始时的回调函数 | null |
| onDrag | function | 拖拽时的回调函数 | null |
| onDragEnd | function | 拖拽结束时的回调函数 | null |
handle 属性
可以在父容器中指定一个触发拖拽的元素，在该元素上触发拖拽事件时，才可以对子元素进行拖拽操作。
const container = document.getElementById('container');
const boxes = container.querySelectorAll('.box');
const options = {
handle: '.handle'
};
new Boxpusher(container, boxes, options);dropZone 属性
可以指定一个放置拖拽元素的区域，在该区域内释放拖拽元素时，才可以将其放置到该区域内。
-- -------------------- ---- ------- ----- --------- - ------------------------------------- ----- ----- - ----------------------------------- ----- -------- - ------------------------------------ ----- ------- - - --------- ----------- -- --- -------------------- ------ ---------
回调函数
可以通过配置回调函数，来自定义拖拽开始、拖拽中和拖拽结束时的操作。
-- -------------------- ---- -------
----- --------- - -------------------------------------
----- ----- - -----------------------------------
----- ------- - -
------------ --------------- ---------- -
----------------- ------- -----------
--
------- --------------- ---------- -
----------------------- -----------
--
---------- --------------- ---------- -
----------------- ----- -----------
-
--
--- -------------------- ------ ---------示例代码
最后，附上一个完整的示例代码，方便大家理解 Boxpusher 的使用。
-- -------------------- ---- -------
------ --------- ---- ------------
----- --------- - -------------------------------------
----- ----- - -----------------------------------
----- -------- - ------------------------------------
----- ------- - -
------- ----------
--------- ------------
------------ --------------- ---------- -
----------------- ------- -----------
--
------- --------------- ---------- -
----------------------- -----------
--
---------- --------------- ---------- -
----------------- ----- -----------
-
--
--- -------------------- ------ ---------总结
Boxpusher 是一个非常方便实用的 npm 包，可以帮助前端开发者快速实现网页元素的拖拽和放置功能。希望本篇文章能对使用 Boxpusher 的开发者提供一些指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c84ccdc64669dde4e59