在当前的前端开发中，拖拽排序已经成为了一个经常使用的功能，而 npm 包 drag-drop-sort 可以帮助我们更加方便地实现这一功能。本文将详细介绍 npm 包 drag-drop-sort 的使用教程，包括安装、引入以及使用方法等方面的内容，希望能够帮助大家更好地应用这个工具。
安装
npm 包 drag-drop-sort 是一个基于 npm 的包，因此在使用之前需要进行安装。可以通过运行以下命令来安装该包：
npm install drag-drop-sort --save
这里需要注意的是，该包是第三方包，因此需要通过 npm 来下载该包，而 --save 参数则是将该包添加到项目的依赖中，以便在需要时进行引用。
引入
安装完成之后，可以通过以下方式引入该包：
import dragDropSort from 'drag-drop-sort'
通过这样的方式，就可以在代码中使用 drag-drop-sort 的相关功能了。
使用方法
npm 包 drag-drop-sort 主要提供了两个方法：sortable 和 droppable。其中 sortable 用于将某一区域中的元素实现拖拽排序，而 droppable 则用于在特定区域中监听元素的拖拽事件。下面将分别介绍这两个方法的具体使用方法。
sortable
sortable 方法主要用于将某一区域中的元素实现拖拽排序。调用该方法时需要传递一个参数对象，其中必须包含一个名为 el 的属性，用于指定需要进行排序的元素。同时，在该对象中还可以设置其他属性，用于控制排序时的一些特定行为，例如是否允许在垂直和水平方向上进行排序、排序时的移动速度等。
下面是一个示例代码，用于在一个 div 容器中实现拖拽排序：
<div id="sortable"> <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> <div class="item">item 4</div> </div>
import dragDropSort from 'drag-drop-sort'
dragDropSort.sortable({
el: document.getElementById('sortable')
})通过以上代码，就可以实现在 div 容器中进行拖拽排序的功能了。
droppable
droppable 方法主要用于在特定区域中监听元素的拖拽事件，需要传递一个参数对象，其中必须包含一个名为 el 的属性，用于指定需要监听拖拽事件的区域。同时，在该对象中还可以设置其他属性，例如拖拽的元素所在的容器等。
下面是一个示例代码，用于在一个 div 容器中监听元素的拖拽事件：
<div id="droppable"></div> <div class="item-container"> <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> <div class="item">item 4</div> </div>
-- -------------------- ---- -------
------ ------------ ---- ----------------
----- --------- - -----------------------------------------
------------------------
--- -------------------------------------
---------- ---------
--
---------------------------------- --- -- -
------------------
----- ---- - ------------------------------------
----- ------ - --------
-- ------- ---------------- --- -------- -- ---------------------------------- -
------------------------------------------------------------- -------
- ---- -
-------------------------------------------------
-
--通过以上代码，就可以实现在 div 容器中监听元素的拖拽事件的功能了。
总结
通过本文的介绍，我们了解了 npm 包 drag-drop-sort 的安装、引入以及使用方法等方面的内容，可以发现该包非常实用，可以帮助我们更加方便地实现前端开发当中的拖拽排序等功能。因此，在实际开发过程中，我们可以将其应用到项目中，提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006734f890c4f7277583838