基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能

ngDraggable.js是一款比较简单实用的开发拖拽插件，借助于封装好的一些自定义指令，能够快速的进行一些拖拽应用开发。首先先介绍一些基本的概念；

ng-drop:是否允许放入拖拽元素

ng-drop-success(数据，事件):美元拖拽元素放入的回调；$数据：放入元素数据；$事件拖拽事件对象

ng-drag:元素是否允许拖拽

ng-drag-success ($ data，$ event): $$ data :拖拽元素数据，$事件拖拽元素事件对象

ng-drag-data:拖拽数据

官方链接：https://github。com/fatlineofcode/ngDraggable

在拖拽进行元素排序时，只需动态更改下循环数组元素顺序；具体事件绑定滴绑定在父元素，拖动绑定在子元素即可，具体实现代码如下：

效果图如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' style .拖动容器{ display : flex justice-content : flex-start；align-items:居中；} .拖曳容器。拖动框{ display : flex align-items :居中；正义-内容：中心；宽度： 200像素；高度： 200像素；margin : 20pxcolor : # ffffont-size : 20px；字体粗细：粗体；} .拖曳容器。拖曳盒。拖动项目{ display : flex align-items :居中；正义-内容：中心；宽度： 150像素；高度： 150像素；}/style title ng-dragger/title/head body ng-app=' app ' ng-controller=' dragger controller ' div class=' drag-container ' div ng-repeat=' drag arr ' class=' drag-box ' ng-drop=' true ' ng-drop-success=' onDropComplete($ index，$data，$ event)' div class=' drag-item ' ng-drag=' true ' ng-drag-data=' { { item } } ' ng-style=' { background 333: item。color } ' 'myapp。控制器('牵引控制器'，函数($ scope){ $ scope。dragarr=[{ text : '方块1 '，color: 'green '，key: 'arr1' }，{ text: '方块2 '，color: 'blue '，key: 'arr1' }，{ text: '方块3 '，color: '#888 '，key: 'arr1' }，{ text: '方块4 '，color: '#888 '，key: 'arr2' }，{ text: '方块5 '，color: '#888 '，key: 'arr2' }，{ text: '方块6 '，color: '#888 '，key : ' arr 2 ' }]；$ scope。ondropcomplete=function(index，obj，$ event){ var OtherObj=$ scope。dragarr[index]；var其他索引=$ scope。德拉加。查找索引(vv=对象。is(vv。文本、对象。文本))；if (otherObj.key！==obj.key)返回；$ scope。dragarr[index]=obj；$ scope。dragarr[其他索引]=其他对象；} })/脚本/正文/html

总结

以上所述是小编给大家介绍的基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！