前言
ng2draggable 是一个基于 Angular 的 npm 包，用于将 HTML 元素变成可拖动的元素。在前端开发中，元素拖动功能的需求比较常见，而 ng2draggable 可以让我们轻松地实现这个功能。本文将针对 ng2draggable 的使用方法详细介绍。
安装与导入
首先需要通过 npm 安装 ng2draggable：
npm install ng2draggable --save
安装完成后，需要在 Angular 项目中导入相关模块：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - ------------------ - ---- --------------- ----------- ------------- - ------------ -- -------- - -------------- ------------------ -- ---------- --- ---------- -------------- -- ------ ----- --------- - -展开代码
使用方法
使用 ng2draggable 很简单，只需要在需要拖动的元素上加上 ng2-draggable 属性就可以了。
<div ng2-draggable>我是一个可拖动的元素</div>
如果需要在拖动时隐藏原来的元素，可以使用 dragHandle 属性。
<div ng2-draggable dragHandle=".handle">我是一个可通过 .handle 拖动的元素</div> <div class="handle">我是 .handle</div>
如果需要对拖拽事件进行监听，则需要使用 dragStart、dragging、dragEnd 三个事件。
<div ng2-draggable (dragStart)="onDragStart($event)" (dragging)="onDragging($event)" (dragEnd)="onDragEnd($event)">我是一个可拖动的元素</div>
-- -------------------- ---- ------- ------------------ ---- - -------------------- ------- - ----------------- ---- - ------------------- ------- - ---------------- ---- - -------------------- ------- -展开代码
示例代码
完整使用示例代码如下：
<div ng2-draggable dragHandle=".handle" (dragStart)="onDragStart($event)" (dragging)="onDragging($event)" (dragEnd)="onDragEnd($event)">我是一个可通过 .handle 拖动的元素</div> <div class="handle">我是 .handle</div>
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ----------- --------- - ---- ------------- -------------------- --------------------------------- ------------------------------- ------------------------------------- ------- ----------- ---- ----------------- ------------- -- -- ------ ----- ------------ - ------------------ ---- - -------------------- ------- - ----------------- ---- - ------------------- ------- - ---------------- ---- - -------------------- ------- - -展开代码
总结
ng2draggable 是一个方便易用的 npm 包，可以帮助我们快速地实现元素拖动功能。在实际开发中，如果需要使用到元素拖动，可以尝试使用 ng2draggable。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/62068
