在前端开发中，拖拽列表是一个常见的组件需求。而 blear.ui.draggable-list 是一个方便易用的 npm 包，可以快速实现拖拽列表功能。
本文将介绍 blear.ui.draggable-list 的使用教程，并提供相关示例代码。希望读者能够通过本文了解如何使用此 npm 包，并在实际开发中灵活应用。
安装
在项目中安装 blear.ui.draggable-list 可以使用 npm 命令：
npm install --save blear.ui.draggable-list
安装完成后，引入可使用 import 或 require 语句将其引入项目中：
// ES6 方式引入
import DraggableList from 'blear.ui.draggable-list';
// CommonJS 方式引入
const DraggableList = require('blear.ui.draggable-list');初始化
使用 blear.ui.draggable-list 实现拖拽列表的第一步是初始化。初始化方法如下：
const targetElement = document.querySelector('.draggable-list');
const draggableList = new DraggableList(targetElement);其中，.draggable-list 是包裹列表的父元素，可根据具体项目中的实现改写选择器。
配置
在初始化时，可以添加一些配置项使 blear.ui.draggable-list 满足不同的需求。配置项如下：
-- -------------------- ---- ------- ----- ------- - - -- -------- ---------- ----------------- -- --------------- ------------------- ------ -- ------- ------- ------- -- ---------- ------------------ ----- ------------------ ---------------------------------- -- ------------ ----------- ------ -- ------ ---------- ----- -- -------- ------------ --------- -------------- ----------- -- ----- ------------- - --- ---------------------------- ---------
具体的配置项含义请参考注释。
事件
blear.ui.draggable-list 提供了多种事件钩子，方便在拖拽过程中实现个性化的处理。例如：
-- -------------------- ---- -------
----- ------------- - --- ---------------------------- -
-- --------
------------ -- -- -
--------------------
--
-- --------
---------- -- -- -
--------------------
--
-- --------
------------ -- -- -
--------------------
--
-- --------
------- -- -- -
--------------------
--
-- ------------
-------------- -- -- -
------------------------
--
---示例代码
最后，提供一个简单的示例代码供参考：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
----- --------------- ---------------------------- -------------------
------------------------------ ------------
-------
------
--------------------------- ---------
---- -----------------------
---- ---------------------------------
---- ---------------------------------
---- ---------------------------------
---- ---------------------------------
---- ---------------------------------
------
------- ----------------------------------------------------------------------------
------- -----------------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------------
--------
----- ------------- - ------------------------------------------
----- ------------- - --- ---------------------------- -
---------- -----------------
---
---------
-------
-------引入依赖后，就可以愉快地使用 blear.ui.draggable-list 实现拖拽列表了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668efd9381d61a3540d36