对于前端开发者来说，使用拖拽技术来实现页面元素的交互处理是一个非常常见的需求。如果你正在使用 Angular 开发应用，那么你可以考虑使用 npm 包 vivify-ng2-dnd 来实现拖拽效果。本文将为大家详细介绍 vivify-ng2-dnd 的使用方法和一些应用技巧。
什么是 vivify-ng2-dnd？
vivify-ng2-dnd 是一个 Angular2 的拖拽库，它提供了一系列的指令和服务，可以用于实现拖拽和拖放等效果。vivify-ng2-dnd 基于 HTML5 的 Drag and Drop API 实现，它的主要目标是为开发者提供一个简单易用、灵活性高的拖拽方案。下面我们将详细介绍该库的使用方法。
安装 vivify-ng2-dnd
使用 vivify-ng2-dnd，首先需要安装该库。你可以使用 npm 安装它：
--- ------- -------------- ------
在安装好库之后，你需要在 Angular2 应用中引入该库，只需在 module.ts 文件中导入 VivifyDndModule，即可使用该库提供的所有指令和服务：
------ - --------------- - ---- ----------------- ----------- -------- ------------------ ------------- --------------- ---------- --------------- -- ------ ----- --------- - -
使用 vivify-ng2-dnd
vivify-ng2-dnd 提供了两个指令，分别是 dnd-draggable 和 dnd-droppable，用于实现拖拽和拖放。我们可以将 dnd-draggable 放置于要拖拽的元素上，而将 dnd-droppable 放置于接受拖拽元素的元素上。下面我们将依次介绍这两个指令的使用方法：
dnd-draggable：
该指令用于使一个元素可被拖动。我们可以为该指令提供一个可选参数 dragData，用于传递拖拽元素的数据。使用该指令的方法如下：
---- ------- --- ---- ------------- --------------------------------- --- -- -------------
需要注意的是，如果你希望多个元素能够同时被拖拽，在这些元素上都要加上 dnd-draggable 指令。
dnd-droppable：
该指令用于接受可拖拽元素。我们需要为该指令提供一个可选参数 dropZones，用于指定可以接受哪些元素。使用该指令的方法如下：
---- ----------- --- ---- ------------- ----------------------- -------------------------------------- ---- -- ------
我们可以使用一个数组来指定接受的元素，例如上面例子中使用 dropZones="['zone1']" 表示只接受属于 zone1 区域的元素进行拖拽，如果您希望任何元素都可以拖到指定的元素中，则可以将 dropZones 设置为空数组：dropZones="[]"。
当一个可拖拽元素成功拖放到一个接受元素上时，该元素将会触发一个 onDropSuccess 事件。我们需要在组件中为该事件提供一个处理方法 dropSuccess，例如：
------ - --------- - ---- ----------------
------ - -------- - ---- -----------------
------------
--------- ---------
------------ -----------------------
--
------ ----- ------------ -
----------------- --------- -
-------------------------- ------
-
-定制 vivify-ng2-dnd
vivify-ng2-dnd 是一款十分灵活的拖拽库，你可以通过对源码进行修改，来满足你的定制化需求。例如，你可以修改该库中的 css 样式，将默认样式改成自己喜欢的样式；或者你可以修改 dnd-draggable 和 dnd-droppable 指令中的一些默认值，以适应你的业务场景。
当你修改完源码后，可以使用以下命令重新编译和打包：
--- --- -----
总结
vivify-ng2-dnd 是一个非常实用的拖拽库，在 Angular2 应用中使用起来相当简单，该库提供了完整的拖拽应用方案。当然，除了该库之外，还有其他一些拖拽库也十分地优秀，开发者可以根据自己的需要选择合适的库进行使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005589f81e8991b448d5eaf