Dragula 过滤器 - JavaScript

Dragula 过滤器是一种用于 JavaScript 的独立库或插件，用于将拖动元素应用于 Web 应用程序中的交互性功能。该过滤器使用户可以轻松地拖放元素，从而改变元素的位置。Dragula 过滤器也允许用户吸附到其他元素，并通过可以设置的触发器在与其他元素碰撞时触发操作。

特点

以下是 Dragula 过滤器的一些主要功能：

• 能够与所有现代浏览器协作
• 可以在所有 HTML 元素之间拖放
• 容易使用和轻量级
• 支持触发器
• 可以自定义样式
• 可以自定义轮廓线和控制

如何使用 Dragula 过滤器

Dragula 过滤器在一个单独的 JavaScript 文件中被导入，然后可以轻松地通过在 HTML 中定义相应的元素和事件来使用它。要使用 Dragula 过滤器，请遵循以下步骤：

1. 首先，需要引入 Dragula 过滤器库文件。如果使用 Npm，则可以使用以下命令安装：

   npm i dragula --save
   

   或者，您可以使用以下链接从 CDN 导入脚本：

   <script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.js"></script>
   

2. 然后，可以创建一个容器元素，并向其添加要拖动的元素。例如：

   <div id="myContainer">
     <div id="item1">Item 1</div>
     <div id="item2">Item 2</div>
     <div id="item3">Item 3</div>
   </div>
   

3. 接下来，可以使用以下代码启动 Dragula 过滤器：

   var container = document.getElementById("myContainer");
   dragula([container]);
   

4. 您现在可以从容器中拖动这些元素并将它们放回。

自定义拖放操作

Dragula 过滤器允许用户自定义拖动和放置操作。以下是一些示例代码：

// 拖动时添加类
dragula().on("drag", function (el) {
  el.className = el.className.replace("ex-moved", "");
});

// 拖动时删除类
dragula().on("drop", function (el, target) {
  el.className += " ex-moved";
});

// 碰撞时添加类
dragula().on("over", function (el, container) {
  container.className += " ex-over";
});

// 碰撞时删除类
dragula().on("out", function (el, container) {
  container.className = container.className.replace("ex-over", "");
});

自定义触发器

Dragula 过滤器允许用户自定义触发器，在满足特定条件时触发操作。以下是一些示例代码：

// 在添加一个元素后触发
dragula().on("dragend", function () {
  // ...
});

// 在移动元素时触发
dragula().on("move", function () {
  // ...
});

// 在释放元素时触发
dragula().on("release", function () {
  // ...
});

自定义拖放控制

Dragula 过滤器允许用户自定义拖动和放置控制，例如拖放后的位置。以下是一些示例代码：

// 垂直拖拽控制
dragula({
  direction: "vertical"
});

// 控制是否能够将元素从一个容器拖到另一个容器
dragula({
  copy: true
});

// 指定容器可以接受哪些元素的类型
dragula({
  accepts: function (el, target, source, sibling) {
    return true; // true 表示可以接受
  }
});

以上是 Dragula 过滤器的一些主要功能，但您也可以根据需要自定义其他过滤器。有关更多详细信息，请参阅 Dragula 官方文档。