在前端开发中，拖拽排序是一个常见的需求，比如在一个表格中，用户可以通过拖拽某一行来改变它的位置。在 AngularJS 项目中，我们可以使用 ngDraggable 模块来实现拖拽排序功能。本文将介绍如何使用 ngDraggable 模块来实现拖拽排序，并提供示例代码。
ngDraggable 模块介绍
ngDraggable 是一个 AngularJS 模块，用于实现拖拽功能。它提供了一个指令（drag）和一个服务（ngDraggable），可以方便地实现拖拽功能。具体使用方法可以参考 ngDraggable 的文档。
实现拖拽排序的方案
在实现拖拽排序功能时，我们需要考虑以下几个方面：
- 如何获取拖拽的目标元素；
- 如何获取目标元素的位置信息；
- 如何在拖拽过程中更新目标元素的位置；
- 如何在拖拽结束后更新数据。
下面我们将分别介绍这几个方面的实现方法。
获取拖拽的目标元素
在 ngDraggable 中，我们可以使用 drag 指令来指定需要拖拽的元素。例如：
<div drag>拖拽我</div>
这样，当用户拖拽这个 div 元素时，ngDraggable 就会开始拖拽操作。我们可以在 drag 指令的 link 函数中获取到这个元素：
link: function(scope, element, attrs) { // element 是拖拽的元素 }
获取目标元素的位置信息
在拖拽过程中，我们需要获取目标元素的位置信息，以便更新它的位置。ngDraggable 提供了一个服务 ngDraggable，可以获取元素的位置信息。例如：
ngDraggable.getTransformPosition(element);
这个方法会返回一个包含元素的位置信息的对象，其中包括 x 和 y 两个属性，分别表示元素的横向和纵向位置。
在拖拽过程中更新目标元素的位置
在拖拽过程中，我们需要不断地更新目标元素的位置，以便让用户看到拖拽效果。ngDraggable 提供了一个事件 dragging，可以监听拖拽过程中的事件。例如：
-- -------------------- ---- ------- ---------------------------- --------------- ----- - -- -------- --- --------------------------- --------------- ----- - -- -------- --- -------------------------- --------------- ----- - -- -------- ---展开代码
在 dragging 事件中，我们可以使用 ngDraggable 的 setTransform 方法来更新元素的位置。例如：
ngDraggable.setTransform(element, x, y);
这个方法会将元素的位置设置为指定的横向和纵向位置。我们可以根据拖拽的位移来计算出新的位置，然后调用 setTransform 方法来更新元素的位置。
在拖拽结束后更新数据
在拖拽结束后，我们需要更新数据，以便让新的排序生效。具体的更新方法可以根据具体的需求而定，例如可以使用 AngularJS 的双向数据绑定来实现。
示例代码
下面是一个使用 ngDraggable 实现拖拽排序的示例代码：
-- -------------------- ---- ------- ---- ----------------------------- ------- ------- ---- ----------- ----------- ----- -------- ------- --- --------------- -- ------ ----- ---------------------- --------------------- ----- -------- -------- ------展开代码
-- -------------------- ---- ------- ----------------------- ---------------- --------------------------- ---------------- ------------ - ------------ - - - ----- ----- ---- -- -- - ----- ----- ---- -- -- - ----- ----- ---- -- - -- ----------------------------- --------------- ----- - -- -------- --- ---------------------------- --------------- ----- - -- -------- --- -------- - ----------------------------------------------- --- ------- - ------------ --- ------- - ------------ -------------------------------------- ---------- - -------- ---------- - --------- --- --------------------------- --------------- ----- - -- -------- ------------------------ - -- ---- --- ----- - -------------------------------------- -------------------------- --- ------------------------------- -- ----------------- --- --- ---展开代码
在这个示例中，我们使用 ng-repeat 指令来生成表格中的行，然后使用 drag 指令来指定每一行是可拖拽的。在拖拽过程中，我们使用 ngDraggable 的 getTransformPosition 方法来获取元素的位置信息，然后根据拖拽的位移来计算新的位置，最后使用 setTransform 方法来更新元素的位置。在拖拽结束后，我们使用 $apply 方法来更新数据，以便让新的排序生效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d49dcea941bf71348b0b56
