[AngularJS]制作Mouse Drag Event directive演示

 [AngularJS]制作Mouse Drag Event directive全演示：

Html代码：

<div ng-style="{'top': itemTop, 'left': itemLeft}"   
   my-mousedrag="itemTop = itemTop - $deltaY; itemLeft = itemLeft - $deltaX"   
></div>   

JavaScript代码：

app.directive('myMousedrag', function() {   
   return function(scope, element, attrs) {   
       var prevEvent;   
       element.mousedown(function(event){   
           prevEvent = event;   
   
       }).mouseup(function(event){   
           prevEvent = null;   
   
       }).mousemove(function(event){   
           if(!prevEvent){ return; }   
   
           /*将 element 拖移事件传递到 scope 上*/   
           scope.$eval(attrs['myMousedrag'], {   
               $event: event,   
               $deltaX: event.clientX - prevEvent.clientX,   
               $deltaY: event.clientY - prevEvent.clientY   
           });   
   
           /*通知 scope 有异动发生*/   
           scope.$digest();   
   
           prevEvent = event;   
       });   
   
       /*在 destroy 时清除事件注册*/   
       scope.$on('$destroy', function(){   
           element.off('mousedown mouseup mousemove');   
       });   
   };   
});