概述
ng-dragula是一个用于AngularJS应用程序的拖放库。它是基于Dragula（一个框架无关的JavaScript库）构建的，可以实现类似于jQuery UI Sortable的高性能、易用性和高级功能。
ng-dragula提供了一系列指令，使开发人员可以轻松地将拖放功能引入他们的应用程序中。它还提供了一些默认的行为和设置，但也可以轻松地进行自定义。
在本文中，我们将介绍如何使用npm包ng-dragula进行拖放操作。
安装
我们首先需要安装npm包ng-dragula。
使用下面的命令进行安装：
npm install ng-dragula
或者，在你的package.json中添加：
"ng-dragula": "^2.1.1" }
快速入门
安装完ng-dragula之后，我们需要按照以下步骤进行配置。
- 在app.module中引入ngDragula:
import ngDragula from 'ng-dragula';
- 然后在app.module的imports部分添加：
ngDragulaService.forRoot();
- 在Html页面中添加下面的代码：
"> <div dragula='"first-bag"' dragula-model='[]'>
First container
</div>
<div dragula='"first-bag"' dragula-model='[]'>
Second container
</div>
</div> 在以上代码中，我们添加了wrapper和两个container。我们给每个container添加了dragula指令，用于指定这个container使用哪一个拖放组。我们还添加了一个dragula-model指令，用于指定拖放元素的列表。
这里我们设定了两个container使用的是同一个拖放组，因此它们之间是可以拖放的。
- 接下来我们需要添加dragula的默认样式：
<link rel="stylesheet" href="node_modules/ng-dragula/dist/dragula.css">
此时，我们的ng-dragula已经可以正常工作了。
深入使用
ng-dragula支持许多高级特性，如容器之间的拖动、限制容器中的元素移动、调整或禁用事件处理程序等。
以下是一些常见的用法示例：
- 拖放容器之间的元素：
如果我们想在两个不同的拖放组之间进行拖放，则需要使用dragula.createService()方法来创建一个新的服务对象。
例如：
removeOnSpill: true
}); 此时，我们成功创建了一个名为"drake"的拖放组，它包括了两个拖放容器。
- 限制容器中的元素移动：
通常，在拖放时，我们想要限制容器中的元素，以避免它们不必要地移动。可以使用以下方法完成此操作：
-- -------------------- ---- -------
-------------------
------------------ --- ------------- -
--------------------- - ------------------------ --- --------------------------
------------------------- -
---------------
-
-
------------------ --- ------------- -
--------------------- - ------------------------ --- --------------------------
------------------------- -
---------------
-
-
--- 这里我们限制每个容器的最大元素数量。
结论
通过本文，你将学到使用npm包ng-dragula进行拖放操作的方法。我们已经讨论了如何安装和配置ng-dragula，并提供了一些高级示例。希望这篇文章对你有所帮助，让你能够更好地掌握前端开发中的拖放技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61243