深究AngularJS中ng-drag、ng-drop的用法

1.相关地址：

插件下载：https://github.com/fatlinesofcode/ngDraggable/blob/master/ngDraggable.js

2.讲解

<div ng-drop="true" ng-drop-success="dropComplete($index,$data,$event)" ng-repeat="item in content">  <li ng-drag="true" ng-drag-data="item" >    姓名：{{item.name}}，年龄：{{item.age}}  </li></div>

ng-drag : 表示该元素能够被拖动

ng-drag-data : 表示拖动元素时跟着被拖走的数据

ng-drop : 表示该元素内可放置被拖动的元素

ng-drop-success : 放置在ngd-drop所在元素里后触发，一般写事件.

ng-drop-success触发的dropComplete方法的参数说明：

$index : 表示拖动的数据所落的元素的下标 $data : 被拖动的数据对象

3.拖拽排序示例

页面代码

<div ng-drop="true" ng-drop-success="dropComplete($index,$data)" ng-repeat="item in content">  <li ng-drag="true" ng-drag-data="item" >    姓名：{{item.name}}，年龄：{{item.age}}  </li></div>

js代码

//数据$scope.content = [{'name':'张春玲','age':28},{'name':'王晰','age':26},{'name':'吴正青','age':66}];/** 拖拽成功触发方法*  index 拖拽后落下时的元素的序号（下标）*  obj被拖动数据对象*/$scope.dropComplete = function(index, obj){    //重新排序    var idx = $scope.content.indexOf(obj);           $scope.content.splice(idx,1);    $scope.content.splice(index,0,obj);  };

4.拖拽交换示例

页面代码

<div ng-drop="true" ng-drop-success="dropComplete($index,$data)" ng-repeat="item in content">  <li ng-drag="true" ng-drag-data="item" >    姓名：{{item.name}}，年龄：{{item.age}}  </li></div>

JS代码

//数据$scope.content = [{'name':'张春玲','age':28},{'name':'王晰','age':26},{'name':'吴正青','age':66}];/** 拖拽成功触发方法*  index 拖拽后落下时的元素的序号（下标）*  obj 被拖动数据对象*/$scope.dropComplete = function(index, obj){    var idx = $scope.content.indexOf(obj);     $scope.content[idx] = $scope.content[index];    $scope.content[index] = obj;      };5. ngDraggable插件代码/* * * https://github.com/fatlinesofcode/ngDraggable */angular.module("ngDraggable", [])  .service('ngDraggable', [function() {    var scope = this;    scope.inputEvent = function(event) {      if (angular.isDefined(event.touches)) {        return event.touches[0];      }      //Checking both is not redundent. If only check if touches isDefined, angularjs isDefnied will return error and stop the remaining scripty if event.originalEvent is not defined.      else if (angular.isDefined(event.originalEvent) && angular.isDefined(event.originalEvent.touches)) {        return event.originalEvent.touches[0];      }      return event;    };  }])  .directive('ngDrag', ['$rootScope', '$parse', '$document', '$window', 'ngDraggable', function ($rootScope, $parse, $document, $window, ngDraggable) {    return {      restrict: 'A',      link: function (scope, element, attrs) {        scope.value = attrs.ngDrag;        var offset,_centerAnchor=false,_mx,_my,_tx,_ty,_mrx,_mry;        var _hasTouch = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;        var _pressEvents = 'touchstart mousedown';        var _moveEvents = 'touchmove mousemove';        var _releaseEvents = 'touchend mouseup';        var _dragHandle;        // to identify the element in order to prevent getting superflous events when a single element has both drag and drop directives on it.        var _myid = scope.$id;        var _data = null;        var _dragOffset = null;        var _dragEnabled = false;        var _pressTimer = null;        var onDragStartCallback = $parse(attrs.ngDragStart) || null;        var onDragStopCallback = $parse(attrs.ngDragStop) || null;        var onDragSuccessCallback = $parse(attrs.ngDragSuccess) || null;        var allowTransform = angular.isDefined(attrs.allowTransform) ? scope.$eval(attrs.allowTransform) : true;        var getDragData = $parse(attrs.ngDragData);        // deregistration function for mouse move events in $rootScope triggered by jqLite trigger handler        var _deregisterRootMoveListener = angular.noop;        var initialize = function () {          element.attr('draggable', 'false'); // prevent native drag          // check to see if drag handle(s) was specified          // if querySelectorAll is available, we use this instead of find          // as JQLite find is limited to tagnames          if (element[0].querySelectorAll) {            var dragHandles = angular.element(element[0].querySelectorAll('[ng-drag-handle]'));          } else {            var dragHandles = element.find('[ng-drag-handle]');          }          if (dragHandles.length) {            _dragHandle = dragHandles;          }          toggleListeners(true);        };        var toggleListeners = function (enable) {          if (!enable)return;          // add listeners.          scope.$on('$destroy', onDestroy);          scope.$watch(attrs.ngDrag, onEnableChange);          scope.$watch(attrs.ngCenterAnchor, onCenterAnchor);          // wire up touch events          if (_dragHandle) {            // handle(s) specified, use those to initiate drag            _dragHandle.on(_pressEvents, onpress);          } else {            // no handle(s) specified, use the element as the handle            element.on(_pressEvents, onpress);          }          if(! _hasTouch && element[0].nodeName.toLowerCase() == "img"){            element.on('mousedown', function(){ return false;}); // prevent native drag for images          }        };        var onDestroy = function (enable) {          toggleListeners(false);        };        var onEnableChange = function (newVal, oldVal) {          _dragEnabled = (newVal);        };        var onCenterAnchor = function (newVal, oldVal) {          if(angular.isDefined(newVal))            _centerAnchor = (newVal || 'true');        };        var isClickableElement = function (evt) {          return (            angular.isDefined(angular.element(evt.target).attr("ng-cancel-drag"))          );        };        /*         * When the element is clicked start the drag behaviour         * On touch devices as a small delay so as not to prevent native window scrolling         */        var onpress = function(evt) {          if(! _dragEnabled)return;          if (isClickableElement(evt)) {            return;          }          if (evt.type == "mousedown" && evt.button != 0) {            // Do not start dragging on right-click            return;          }          if(_hasTouch){            cancelPress();            _pressTimer = setTimeout(function(){              cancelPress();              onlongpress(evt);            },100);            $document.on(_moveEvents, cancelPress);            $document.on(_releaseEvents, cancelPress);          }else{            onlongpress(evt);          }        };        var cancelPress = function() {          clearTimeout(_pressTimer);          $document.off(_moveEvents, cancelPress);          $document.off(_releaseEvents, cancelPress);        };        var onlongpress = function(evt) {          if(! _dragEnabled)return;          evt.preventDefault();          offset = element[0].getBoundingClientRect();          if(allowTransform)            _dragOffset = offset;          else{            _dragOffset = {left:document.body.scrollLeft, top:document.body.scrollTop};          }          element.centerX = element[0].offsetWidth / 2;          element.centerY = element[0].offsetHeight / 2;          _mx = ngDraggable.inputEvent(evt).pageX;//ngDraggable.getEventProp(evt, 'pageX');          _my = ngDraggable.inputEvent(evt).pageY;//ngDraggable.getEventProp(evt, 'pageY');          _mrx = _mx - offset.left;          _mry = _my - offset.top;          if (_centerAnchor) {            _tx = _mx - element.centerX - $window.pageXOffset;            _ty = _my - element.centerY - $window.pageYOffset;          } else {            _tx = _mx - _mrx - $window.pageXOffset;            _ty = _my - _mry - $window.pageYOffset;          }          $document.on(_moveEvents, onmove);          $document.on(_releaseEvents, onrelease);          // This event is used to receive manually triggered mouse move events          // jqLite unfortunately only supports triggerHandler(...)          // See http://api.jquery.com/triggerHandler/          // _deregisterRootMoveListener = $rootScope.$on('draggable:_triggerHandlerMove', onmove);          _deregisterRootMoveListener = $rootScope.$on('draggable:_triggerHandlerMove', function(event, origEvent) {            onmove(origEvent);          });        };        var onmove = function (evt) {          if (!_dragEnabled)return;          evt.preventDefault();          if (!element.hasClass('dragging')) {            _data = getDragData(scope);            element.addClass('dragging');            $rootScope.$broadcast('draggable:start', {x:_mx, y:_my, tx:_tx, ty:_ty, event:evt, element:element, data:_data});            if (onDragStartCallback ){              scope.$apply(function () {                onDragStartCallback(scope, {$data: _data, $event: evt});              });            }          }          _mx = ngDraggable.inputEvent(evt).pageX;//ngDraggable.getEventProp(evt, 'pageX');          _my = ngDraggable.inputEvent(evt).pageY;//ngDraggable.getEventProp(evt, 'pageY');          if (_centerAnchor) {            _tx = _mx - element.centerX - _dragOffset.left;            _ty = _my - element.centerY - _dragOffset.top;          } else {            _tx = _mx - _mrx - _dragOffset.left;            _ty = _my - _mry - _dragOffset.top;          }          moveElement(_tx, _ty);          $rootScope.$broadcast('draggable:move', { x: _mx, y: _my, tx: _tx, ty: _ty, event: evt, element: element, data: _data, uid: _myid, dragOffset: _dragOffset });        };        var onrelease = function(evt) {          if (!_dragEnabled)            return;          evt.preventDefault();          $rootScope.$broadcast('draggable:end', {x:_mx, y:_my, tx:_tx, ty:_ty, event:evt, element:element, data:_data, callback:onDragComplete, uid: _myid});          element.removeClass('dragging');          element.parent().find('.drag-enter').removeClass('drag-enter');          reset();          $document.off(_moveEvents, onmove);          $document.off(_releaseEvents, onrelease);          if (onDragStopCallback ){            scope.$apply(function () {              onDragStopCallback(scope, {$data: _data, $event: evt});            });          }          _deregisterRootMoveListener();        };        var onDragComplete = function(evt) {          if (!onDragSuccessCallback )return;          scope.$apply(function () {            onDragSuccessCallback(scope, {$data: _data, $event: evt});          });        };        var reset = function() {          if(allowTransform)            element.css({transform:'', 'z-index':'', '-webkit-transform':'', '-ms-transform':''});          else            element.css({'position':'',top:'',left:''});        };        var moveElement = function (x, y) {          if(allowTransform) {            element.css({              transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, ' + x + ', ' + y + ', 0, 1)',              'z-index': 99999,              '-webkit-transform': 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, ' + x + ', ' + y + ', 0, 1)',              '-ms-transform': 'matrix(1, 0, 0, 1, ' + x + ', ' + y + ')'            });          }else{            element.css({'left':x+'px','top':y+'px', 'position':'fixed'});          }        };        initialize();      }    };  }])  .directive('ngDrop', ['$parse', '$timeout', '$window', '$document', 'ngDraggable', function ($parse, $timeout, $window, $document, ngDraggable) {    return {      restrict: 'A',      link: function (scope, element, attrs) {        scope.value = attrs.ngDrop;        scope.isTouching = false;        var _lastDropTouch=null;        var _myid = scope.$id;        var _dropEnabled=false;        var onDropCallback = $parse(attrs.ngDropSuccess);// || function(){};        var onDragStartCallback = $parse(attrs.ngDragStart);        var onDragStopCallback = $parse(attrs.ngDragStop);        var onDragMoveCallback = $parse(attrs.ngDragMove);        var initialize = function () {          toggleListeners(true);        };        var toggleListeners = function (enable) {          // remove listeners          if (!enable)return;          // add listeners.          scope.$watch(attrs.ngDrop, onEnableChange);          scope.$on('$destroy', onDestroy);          scope.$on('draggable:start', onDragStart);          scope.$on('draggable:move', onDragMove);          scope.$on('draggable:end', onDragEnd);        };        var onDestroy = function (enable) {          toggleListeners(false);        };        var onEnableChange = function (newVal, oldVal) {          _dropEnabled=newVal;        };        var onDragStart = function(evt, obj) {          if(! _dropEnabled)return;          isTouching(obj.x,obj.y,obj.element);          if (attrs.ngDragStart) {            $timeout(function(){              onDragStartCallback(scope, {$data: obj.data, $event: obj});            });          }        };        var onDragMove = function(evt, obj) {          if(! _dropEnabled)return;          isTouching(obj.x,obj.y,obj.element);          if (attrs.ngDragMove) {            $timeout(function(){              onDragMoveCallback(scope, {$data: obj.data, $event: obj});            });          }        };        var onDragEnd = function (evt, obj) {          // don't listen to drop events if this is the element being dragged          // only update the styles and return          if (!_dropEnabled || _myid === obj.uid) {            updateDragStyles(false, obj.element);            return;          }          if (isTouching(obj.x, obj.y, obj.element)) {            // call the ngDraggable ngDragSuccess element callback            if(obj.callback){              obj.callback(obj);            }            if (attrs.ngDropSuccess) {              $timeout(function(){                onDropCallback(scope, {$data: obj.data, $event: obj, $target: scope.$eval(scope.value)});              });            }          }          if (attrs.ngDragStop) {            $timeout(function(){              onDragStopCallback(scope, {$data: obj.data, $event: obj});            });          }          updateDragStyles(false, obj.element);        };        var isTouching = function(mouseX, mouseY, dragElement) {          var touching= hitTest(mouseX, mouseY);          scope.isTouching = touching;          if(touching){            _lastDropTouch = element;          }          updateDragStyles(touching, dragElement);          return touching;        };        var updateDragStyles = function(touching, dragElement) {          if(touching){            element.addClass('drag-enter');            dragElement.addClass('drag-over');          }else if(_lastDropTouch == element){            _lastDropTouch=null;            element.removeClass('drag-enter');            dragElement.removeClass('drag-over');          }        };        var hitTest = function(x, y) {          var bounds = element[0].getBoundingClientRect();// ngDraggable.getPrivOffset(element);          x -= $document[0].body.scrollLeft + $document[0].documentElement.scrollLeft;          y -= $document[0].body.scrollTop + $document[0].documentElement.scrollTop;          return x >= bounds.left            && x <= bounds.right            && y <= bounds.bottom            && y >= bounds.top;        };        initialize();      }    };  }])  .directive('ngDragClone', ['$parse', '$timeout', 'ngDraggable', function ($parse, $timeout, ngDraggable) {    return {      restrict: 'A',      link: function (scope, element, attrs) {        var img, _allowClone=true;        var _dragOffset = null;        scope.clonedData = {};        var initialize = function () {          img = element.find('img');          element.attr('draggable', 'false');          img.attr('draggable', 'false');          reset();          toggleListeners(true);        };        var toggleListeners = function (enable) {          // remove listeners          if (!enable)return;          // add listeners.          scope.$on('draggable:start', onDragStart);          scope.$on('draggable:move', onDragMove);          scope.$on('draggable:end', onDragEnd);          preventContextMenu();        };        var preventContextMenu = function() {          // element.off('mousedown touchstart touchmove touchend touchcancel', absorbEvent_);          img.off('mousedown touchstart touchmove touchend touchcancel', absorbEvent_);          // element.on('mousedown touchstart touchmove touchend touchcancel', absorbEvent_);          img.on('mousedown touchstart touchmove touchend touchcancel', absorbEvent_);        };        var onDragStart = function(evt, obj, elm) {          _allowClone=true;          if(angular.isDefined(obj.data.allowClone)){            _allowClone=obj.data.allowClone;          }          if(_allowClone) {            scope.$apply(function () {              scope.clonedData = obj.data;            });            element.css('width', obj.element[0].offsetWidth);            element.css('height', obj.element[0].offsetHeight);            moveElement(obj.tx, obj.ty);          }        };        var onDragMove = function(evt, obj) {          if(_allowClone) {            _tx = obj.tx + obj.dragOffset.left;            _ty = obj.ty + obj.dragOffset.top;            moveElement(_tx, _ty);          }        };        var onDragEnd = function(evt, obj) {          //moveElement(obj.tx,obj.ty);          if(_allowClone) {            reset();          }        };        var reset = function() {          element.css({left:0,top:0, position:'fixed', 'z-index':-1, visibility:'hidden'});        };        var moveElement = function(x,y) {          element.css({            transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, '+x+', '+y+', 0, 1)', 'z-index': 99999, 'visibility': 'visible',            '-webkit-transform': 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, '+x+', '+y+', 0, 1)',            '-ms-transform': 'matrix(1, 0, 0, 1, '+x+', '+y+')'            //,margin: '0' don't monkey with the margin,          });        };        var absorbEvent_ = function (event) {          var e = event;//.originalEvent;          e.preventDefault && e.preventDefault();          e.stopPropagation && e.stopPropagation();          e.cancelBubble = true;          e.returnValue = false;          return false;        };        initialize();      }    };  }])  .directive('ngPreventDrag', ['$parse', '$timeout', function ($parse, $timeout) {    return {      restrict: 'A',      link: function (scope, element, attrs) {        var initialize = function () {          element.attr('draggable', 'false');          toggleListeners(true);        };        var toggleListeners = function (enable) {          // remove listeners          if (!enable)return;          // add listeners.          element.on('mousedown touchstart touchmove touchend touchcancel', absorbEvent_);        };        var absorbEvent_ = function (event) {          var e = event.originalEvent;          e.preventDefault && e.preventDefault();          e.stopPropagation && e.stopPropagation();          e.cancelBubble = true;          e.returnValue = false;          return false;        };        initialize();      }    };  }])  .directive('ngCancelDrag', [function () {    return {      restrict: 'A',      link: function (scope, element, attrs) {        element.find('*').attr('ng-cancel-drag', 'ng-cancel-drag');      }    };  }])  .directive('ngDragScroll', ['$window', '$interval', '$timeout', '$document', '$rootScope', function($window, $interval, $timeout, $document, $rootScope) {    return {      restrict: 'A',      link: function(scope, element, attrs) {        var intervalPromise = null;        var lastMouseEvent = null;        var config = {          verticalScroll: attrs.verticalScroll || true,          horizontalScroll: attrs.horizontalScroll || true,          activationDistance: attrs.activationDistance || 75,          scrollDistance: attrs.scrollDistance || 15        };        var reqAnimFrame = (function() {          return window.requestAnimationFrame ||            window.webkitRequestAnimationFrame ||            window.mozRequestAnimationFrame ||            window.oRequestAnimationFrame ||            window.msRequestAnimationFrame ||            function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {              window.setTimeout(callback, 1000 / 60);            };        })();        var animationIsOn = false;        var createInterval = function() {          animationIsOn = true;          function nextFrame(callback) {            var args = Array.prototype.slice.call(arguments);            if(animationIsOn) {              reqAnimFrame(function () {                $rootScope.$apply(function () {                  callback.apply(null, args);                  nextFrame(callback);                });              })            }          }          nextFrame(function() {            if (!lastMouseEvent) return;            var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);            var viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);            var scrollX = 0;            var scrollY = 0;            if (config.horizontalScroll) {              // If horizontal scrolling is active.              if (lastMouseEvent.clientX < config.activationDistance) {                // If the mouse is on the left of the viewport within the activation distance.                scrollX = -config.scrollDistance;              }              else if (lastMouseEvent.clientX > viewportWidth - config.activationDistance) {                // If the mouse is on the right of the viewport within the activation distance.                scrollX = config.scrollDistance;              }            }            if (config.verticalScroll) {              // If vertical scrolling is active.              if (lastMouseEvent.clientY < config.activationDistance) {                // If the mouse is on the top of the viewport within the activation distance.                scrollY = -config.scrollDistance;              }              else if (lastMouseEvent.clientY > viewportHeight - config.activationDistance) {                // If the mouse is on the bottom of the viewport within the activation distance.                scrollY = config.scrollDistance;              }            }            if (scrollX !== 0 || scrollY !== 0) {              // Record the current scroll position.              var currentScrollLeft = ($window.pageXOffset || $document[0].documentElement.scrollLeft);              var currentScrollTop = ($window.pageYOffset || $document[0].documentElement.scrollTop);              // Remove the transformation from the element, scroll the window by the scroll distance              // record how far we scrolled, then reapply the element transformation.              var elementTransform = element.css('transform');              element.css('transform', 'initial');              $window.scrollBy(scrollX, scrollY);              var horizontalScrollAmount = ($window.pageXOffset || $document[0].documentElement.scrollLeft) - currentScrollLeft;              var verticalScrollAmount = ($window.pageYOffset || $document[0].documentElement.scrollTop) - currentScrollTop;              element.css('transform', elementTransform);              lastMouseEvent.pageX += horizontalScrollAmount;              lastMouseEvent.pageY += verticalScrollAmount;              $rootScope.$emit('draggable:_triggerHandlerMove', lastMouseEvent);            }          });        };        var clearInterval = function() {          animationIsOn = false;        };        scope.$on('draggable:start', function(event, obj) {          // Ignore this event if it's not for this element.          if (obj.element[0] !== element[0]) return;          if (!animationIsOn) createInterval();        });        scope.$on('draggable:end', function(event, obj) {          // Ignore this event if it's not for this element.          if (obj.element[0] !== element[0]) return;          if (animationIsOn) clearInterval();        });        scope.$on('draggable:move', function(event, obj) {          // Ignore this event if it's not for this element.          if (obj.element[0] !== element[0]) return;          lastMouseEvent = obj.event;        });      }    };  }]);