什么是 ngx-easily-draggable
ngx-easily-draggable 是一个 Angular 的 npm 包，它可以帮助我们实现页面元素的拖拽功能。ngx-easily-draggable 可以用于实现多种拖拽场景，例如拖拽改变元素大小、拖拽改变元素位置、拖拽改变元素透明度等。
ngx-easily-draggable 的安装
要安装 ngx-easily-draggable，我们可以使用 npm 命令来进行安装：
npm install ngx-easily-draggable
安装完毕后，在需要使用拖拽功能的模块中引入 NgxEasilyDraggableModule：
-- -------------------- ---- -------
------ - ------------------------ - ---- -----------------------
-----------
-------- -
-- ----
------------------------
--
-- ----
--
------ ----- --------- - -ngx-easily-draggable 的使用
安装并引入 NgxEasilyDraggableModule 后，我们就可以在组件的模板中使用 ngx-easily-draggable 指令来实现元素的拖拽。
例如，要让一个 div 元素可以在页面中被拖拽，我们可以这样做：
<div ngx-easily-draggable> 我可以被拖拽 </div>
拖拽时会发现，div 元素已经可以在页面中自由移动了。
拖拽的特征
我们还可以限制拖拽的方向、边界等特征。例如，要让一个 div 元素只能在水平方向上拖拽，可以这样指定 direction 属性：
<div ngx-easily-draggable [direction]="'horizontal'"> 我只能水平拖拽 </div>
还可以指定元素的拖拽范围，例如：
<div ngx-easily-draggable [boundary]="true">
我不能离开我的父级容器
<div>
我是父级容器
</div>
</div>表示这个 div 元素不能被拖拽超出其父级容器。如果要限定某个范围内可拖拽，我们还可以指定另一个元素作为拖拽范围，例如：
-- -------------------- ---- -------
---- ---------- ------------- ------ ------- ------ --------- -----------
---- ----- ----------------------------- ------------------- ---------------------
------
------
------
---- -------------------- --------------- -----------------------
----------
------这里我们指定了 #container 作为拖拽范围，指定 #drag 作为拖拽的把手。
拖拽的事件
在 ngx-easily-draggable 中，我们可以通过监听拖拽事件来处理拖拽过程中需要执行的操作。ngx-easily-draggable 提供了一些拖拽事件，例如 dragStart、drag、dragEnd 等。
我们可以用以下方式来监听这些拖拽事件：
<div ngx-easily-draggable (dragStart)="onDragStart($event)" (drag)="onDrag($event)" (dragEnd)="onDragEnd($event)"> 拖拽我吧 </div>
然后在组件中定义相应的事件处理函数来完成拖拽事件的处理：
-- -------------------- ---- ------- ------------------ ---- - --------------------- ------- - ------------- ---- - --------------------- ------- - ---------------- ---- - --------------------- ------- -
示例代码
下面是一个完整的示例代码，使用 ngx-easily-draggable 实现了一个可拖拽的对话框：
-- -------------------- ---- -------
---- ---------- ------------- ------ ------- ------ --------- -----------
---- ------- ------------------------ -------- -------- -------
---- -------------------- ----------------- ---------------------- -------------------------
------
------
------
---- ------------------------ ----- ------- ----- -------- -------
---------
------
------这个示例中，我们指定了 #container 作为拖拽范围，指定了 #header 作为拖拽把手，以及指定了拖拽方向为垂直方向。这样，我们就实现了一个完整的可拖拽的对话框。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e1d9381d61a3540930