前言
在前端开发中，拖拽是一个非常常见的需求，针对拖拽的需求，现有的库对于拖拽的支持和封装也非常的完善。今天我们来介绍一款基于angular4的npm包 angular4-dragdrop，该包提供了一个局部范围的拖拽功能，并以指令的方式提供给使用者进行拖放操作。
安装
使用angular4-dragdrop非常简单，首先我们需要先把npm包安装到我们的项目中，使用npm命令即可：
npm install angular4-dragdrop
安装完成后，我们需要在我们的模块中引入angular4-dragdrop：
-- -------------------- ---- -------
------ - ----------------- - ---- --------------------
-- ---
-----------
-- ---
-------- -
----------------------------
-- ---
--
-- ---
--
------ ----- --------- - -指令
angular4-dragdrop的指令有drag、dropTarget和dragHandle。简单来说，drag和dragHandle是拖拽源相关的指令，dropTarget是拖放目标相关的指令。
drag
用于指定可拖拽区域，需要绑定该指令的元素会成为拖动源。可以添加dragEffect和dragDataType属性，分别用于指定拖拽效果和拖拽类型。
<div [drag]="true" [dragDataType]="'text/plain'" [dragEffect]="'copy'"></div>
dropTarget
用于指定可放置区域，需要绑定该指令的元素会成为拖放目标。可以添加dropScope、allowDrop和onDropSuccess属性，分别用于指定拖放范围、是否允许拖放和拖放成功后的回调函数。
<div [dropTarget]="'myScope'" [allowDrop]="myFunction" [onDropSuccess]="myDropFunction"></div>
dragHandle
用于指定拖拽源的手柄，需要绑定该指令的元素会成为拖动源的拖拽手柄。
<div [drag]="true" [dragHandle]="'.dragHandle'">
<div class="dragHandle">
Drag Handle
</div>
Drag me!
</div>示例
下面我们通过一个示例来演示如何使用angular4-dragdrop进行拖拽操作。
首先，我们准备好一个可以被拖拽的区域和一个可以放置的区域，它们都是使用angular4-dragdrop指令实现的。
-- -------------------- ---- ------- ---- --- --- ---- ------------- ----------------------------- --------------------- ------------------------- ---- ------------------- ------------ ---- ---------------- --------- ------ ---- ---- --- ---- ----------------- ------------------------ ------------------------------- ---------------------------------------- ---- ----- ------
通过drag和dropTarget指令分别绑定到两个元素上，就可以实现拖放效果。需要注意的是，两个元素需要分别设置对应的指令属性，例如drag需要设置dragDataType和dragEffect属性。
-- -------------------- ---- -------
-- --------
------ ----- ------------ -
------ ------------------ ---------- ---- -- ------- - ---------- ---- -- -
-- ----
----------------------
------ -----
-
------ ---------------------- ---------- ---- --------- ---- -- ---- - ---------- ---- --------- ---- -- -
-- -----------
--------------------- -- --------- -- ----------
-
-在处理拖拽动作时，需要定义allowDropFunction和onDropSuccessFunction回调函数，分别表示该元素是否允许执行拖放和拖放成功后的处理函数。我们可以在这两个回调函数中完成自定义的逻辑处理，例如对拖放对象的数据进行处理。
总结
通过介绍angular4-dragdrop的指令和示例，我们了解了如何使用angular4-dragdrop实现局部范围的拖放操作。希望这篇文章能够对大家了解angular4-dragdrop的使用有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562dc81e8991b448e04bc