ngDraggable.js is a relatively simple and practical angularJS drag plug-in. With some encapsulated custom instructions, it can quickly carry out some drag application development. First, some basic concepts are introduced;
- Ng drop: whether drag elements are allowed
- Ng drop success ($data, $event): drag the callback put in by the element; $data: put in the element data; $event drag the event object
- Ng drag: whether dragging is allowed for elements
- Ng drag success ($data, $event): $data: drag element data, $event drag element event object
- Ng drag data: drag data
Official link: https://github.com/fatlinesofcode/ngDraggable
When you drag and drop to sort elements, you only need to dynamically change the order of the elements in the next loop array. The specific event binding drop is bound to the parent element and drag is bound to the child element. The specific implementation code is as follows:
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <style> 9 .drag-container { 10 display: flex; 11 justify-content: flex-start; 12 align-items: center; 13 } 14 15 .drag-container .drag-box { 16 display: flex; 17 align-items: center; 18 justify-content: center; 19 width: 200px; 20 height: 200px; 21 margin: 20px; 22 color: #fff; 23 font-size: 20px; 24 font-weight: bold; 25 } 26 27 .drag-container .drag-box .drag-item { 28 display: flex; 29 align-items: center; 30 justify-content: center; 31 width: 150px; 32 height: 150px; 33 } 34 </style> 35 <title>ng-dragger</title> 36 </head> 37 38 <body ng-app="app" ng-controller="draggerController"> 39 <div class="drag-container"> 40 <div ng-repeat="item in dragArr" class="drag-box" ng-drop="true" ng-drop-success="onDropComplete($index, $data, $event)"> 41 <div class="drag-item" ng-drag="true" ng-drag-data="{{item}}" ng-style="{background: item.color}">{{item.text}}</div> 42 </div> 43 </div> 44 45 <script src="https://cdn.bootcss.com/angular.js/1.3.1/angular.js"></script> 46 <script src="https://cdn.bootcss.com/ngDraggable/0.1.11/ngDraggable.js"></script> 47 <script> 48 var myApp = angular.module('app', ['ngDraggable']); 49 myApp.controller('draggerController', function($scope) { 50 $scope.dragArr = [{ 51 text: 'Block 1', 52 color: 'green', 53 key: 'arr1' 54 }, { 55 text: 'Block 2', 56 color: 'blue', 57 key: 'arr1' 58 }, { 59 text: 'Block 3', 60 color: '#888', 61 key: 'arr1' 62 }, { 63 text: 'Block 4', 64 color: '#888', 65 key: 'arr2' 66 }, { 67 text: 'Block 5', 68 color: '#888', 69 key: 'arr2' 70 }, { 71 text: 'Block 6', 72 color: '#888', 73 key: 'arr2' 74 }]; 75 76 $scope.onDropComplete = function(index, obj, $event) { 77 var otherObj = $scope.dragArr[index]; 78 var otherIndex = $scope.dragArr.findIndex(vv => Object.is(vv.text, obj.text)); 79 if (otherObj.key !== obj.key) return; 80 $scope.dragArr[index] = obj; 81 $scope.dragArr[otherIndex] = otherObj; 82 } 83 84 }) 85 </script> 86 </body> 87 88 </html>
The renderings are as follows: