AngularJS之拖拽排序(ngDraggable.js)

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

  • ng-drop:是否允许放入拖拽元素
  • ng-drop-success($data, $event):拖拽元素放入的回调;$data:放入元素数据;$event拖拽事件对象
  • ng-drag:元素是否允许拖拽
  • ng-drag-success($data, $event):$data:拖拽元素数据,$event拖拽元素事件对象
  • ng-drag-data:拖拽数据

  官方链接:https://github.com/fatlinesofcode/ngDraggable

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

 1 
 2 
 3 
 4 
 5     
 6     
 7     
 8     
35     ng-dragger
36 
37 
38 
39     
40
41
{{item.text}}
42
43
44 45 46 47 86 87 88

  效果图如下:AngularJS之拖拽排序(ngDraggable.js)_第1张图片

 

你可能感兴趣的:(AngularJS之拖拽排序(ngDraggable.js))