在前端开发中，拖拽功能是非常常见的需求，而 @swimlane/dragula 包可以帮助我们轻松实现拖拽功能。本文将详细介绍如何使用该 npm 包以及相关的一些特性和注意事项。
安装
使用 npm 命令进行安装：
npm install --save @swimlane/dragula
使用
在项目中引入 @swimlane/dragula：
import dragula from '@swimlane/dragula'
然后，我们需要找到想要使用拖拽功能的 HTML 元素：
<div class="dragula-container"> <div class="dragula-item">Item 1</div> <div class="dragula-item">Item 2</div> <div class="dragula-item">Item 3</div> </div>
在 JavaScript 中使用 dragula 创建一个拖拽容器：
const container = document.querySelector('.dragula-container')
dragula([container])这样，我们就成功创建了一个可以拖拽的容器组件。
相关特性
拖拽方向
dragula 可以设置拖拽的方向，一般有四个方向可选：垂直、水平、全部方向、无法拖动。我们可以通过 direction 属性来指定方向：
dragula([container], { direction: 'vertical' }) // 拖拽方向为垂直
dragula([container], { direction: 'horizontal' }) // 拖拽方向为水平
dragula([container], { direction: 'both' }) // 拖拽方向为全部方向
dragula([container], { direction: 'none' }) // 拖拽不可用拖拽排序
除了单纯的拖拽，我们还可以使用 dragula 实现拖拽排序的功能。首先，在拖拽容器设置 dragula-container 类名，然后在其中的子项设置 dragula-item 类名，用于标记拖拽元素：
<ul class="dragula-container"> <li class="dragula-item">Item 1</li> <li class="dragula-item">Item 2</li> <li class="dragula-item">Item 3</li> </ul>
然后，我们需要监听拖拽完成事件，以获取拖拽后的顺序：
const container = document.querySelector('.dragula-container')
const drake = dragula([container])
drake.on('drop', (el, target, source, sibling) => {
const items = Array.from(container.querySelectorAll('.dragula-item'))
console.log('拖拽后的顺序：', items.map(item => item.textContent))
})拖拽限制
有时候，我们需要对拖拽做一些限制，例如不能跨容器拖拽、不能拖动某些元素等。我们可以通过 accepts 和 invalid 属性对拖拽进行限制：
-- -------------------- ---- -------
----- ---------- - ---------------------------------------------
----- ---------- - ---------------------------------------------
-------------------- ------------ -
-------- ---- ------- ------- -------- -- -
-- --------------
------ ------ --- ------
--
-------- ---- ------- -- -
-- ----- --------------------- -----
------ ----------------------------------------------
-
--触发条件
默认情况下，dragula 开启了 revertOnSpill 特性，即当拖拽元素从容器中拖出后释放鼠标，该元素会回到容器中原有位置。如果你想设置拖拽成功后才回到原有位置，可以设置 revertOnSpill: false，并且每个容器拖拽过程的触发条件分别为 drag, dragend, dragenter, dragleave, drop，如果你监听这些事件，可以精确地控制拖拽任务。
示例
以下是一个简单的示例，展示了如何在 Vue 组件中使用 @swimlane/dragula：
-- -------------------- ---- -------
----------
---- --------------------------
---- -------------------- -------- -- -------- ---------
-- - --
------
------
-----------
--------
------ ------- ---- -------------------
------ ------- -
---- -- -
------ -
-------- --- -- -- -- --
-
--
------- -- -
----- --------- - --------------------------------------------
------------------------------- -- -- -
----- ----- - -------------------------------------------------------
----- ---------- - -------------- -- -------------------------
---------------------------- -----------
--
-
-
---------我们将该组件嵌入到一个 Vue 父组件中，并在父组件中监听子组件的 numbers 数据变化：
<template>
<div>
<dragula-component v-model="numbers" />
<div>当前拖拽排序的数组：{{ numbers }}</div>
</div>
</template>通过以上示例，你可以了解到如何在 Vue 中使用 @swimlane/dragula 实现一些简单但实用的拖拽功能。
总结
本文详细介绍了 @swimlane/dragula 的使用方法以及一些注意事项和拓展特性，希望能对你在前端开发中实现拖拽功能有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/swimlane-dragula