[AngularJS] 製作 Mouse Drag Event directive

Html

原始碼

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

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

JavaScript

原始碼

1. app.directive('myMousedrag', function() { 
2.    return function(scope, element, attrs) { 
3.        var prevEvent; 
4.        element.mousedown(function(event){ 
5.            prevEvent = event; 
6.  
7.        }).mouseup(function(event){ 
8.            prevEvent = null; 
9.  
10.        }).mousemove(function(event){ 
11.            if(!prevEvent){ return; } 
12.  
13.            /*將 element 拖移事件傳遞到 scope 上*/ 
14.            scope.$eval(attrs['myMousedrag'], { 
15.                $event: event, 
16.                $deltaX: event.clientX - prevEvent.clientX, 
17.                $deltaY: event.clientY - prevEvent.clientY 
18.            }); 
19.  
20.            /*通知 scope 有異動發生*/ 
21.            scope.$digest(); 
22.  
23.            prevEvent = event; 
24.        }); 
25.  
26.        /*在 destroy 時清除事件註冊*/ 
27.        scope.$on('$destroy', function(){ 
28.            element.off('mousedown mouseup mousemove'); 
29.        }); 
30.    }; 
31. }); 

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');
        });
    };
});