2014-05-08 02:58

[AngularJS] 製作 jQuery UI Sortable directive

Html
原始碼
  1. <div jq-sortable="selectedList"> 
  2.    <div ng-repeat="item in selectedList"> 
  3.        <img ng-src="{{item.src}}" /> 
  4.    </div> 
  5. </div> 


JavaScript
原始碼
  1. app.directive('jqSortable', ['$parse', function($parse) { 
  2.    return function(scope, element, attrs) { 
  3.        /*解析並取得表達式*/ 
  4.        var expr = $parse(attrs['jqSortable']); 
  5.        var $oldChildren; 
  6.  
  7.        element.sortable({ 
  8.            opacity: 0.7, 
  9.            scroll: false, 
  10.            tolerance: "pointer", 
  11.            start: function() { 
  12.                /*紀錄移動前的 children 順序*/ 
  13.                $oldChildren = element.children('[ng-repeat]'); 
  14.            }, 
  15.            update: function(){ 
  16.                var newList = []; 
  17.                var oldList = expr(scope); 
  18.                var $children = element.children('[ng-repeat]'); 
  19.  
  20.                /*產生新順序的陣列*/ 
  21.                $oldChildren.each(function(i){ 
  22.                    var index = $children.index(this); 
  23.                    if(index == -1){ return; } 
  24.  
  25.                    newList[index] = oldList[i]; 
  26.                }); 
  27.  
  28.                /*將新順序的陣列寫回 scope 變數*/ 
  29.                expr.assign(scope, newList); 
  30.  
  31.                /*通知 scope 有異動發生*/ 
  32.                scope.$digest(); 
  33.            } 
  34.        }); 
  35.  
  36.        /*在 destroy 時解除 Sortable*/ 
  37.        scope.$on('$destroy', function(){ 
  38.            element.sortable('destroy'); 
  39.        }); 
  40.    }; 
  41. }]); 
分類： , , , , 0 回應
2014-05-08 02:56

[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> 

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. }); 
分類： , , , , 0 回應
2014-05-08 02:54

[AngularJS] 製作 jQuery MouseWheel directive

相依套件：jquery-mousewheel

Html
原始碼
  1. <div jq-mousewheel="changeSize($event, $delta, $deltaX, $deltaY)"></div> 

JavaScript
原始碼
  1. app.directive('jqMousewheel', function(){ 
  2.    return function(scope, element, attrs) { 
  3.  
  4.        /*將 element 滾輪事件傳遞到 scope 上*/ 
  5.        element.on('mousewheel', function (event) { 
  6.            scope.$eval(attrs['jqMousewheel'], { 
  7.                $event: event, 
  8.                $delta: event.delta, 
  9.                $deltaX: event.deltaX, 
  10.                $deltaY: event.deltaY 
  11.            }); 
  12.  
  13.            /*通知 scope 有異動發生*/ 
  14.            scope.$digest(); 
  15.        }); 
  16.  
  17.        /*在 destroy 時清除事件註冊*/ 
  18.        scope.$on('$destroy', function(){ 
  19.            element.off('mousewheel'); 
  20.        }); 
  21.    }; 
  22. }); 
分類： , , , , 0 回應
2014-05-08 02:52

[AngularJS] 製作 jQuery scrollTop scrollLeft directive

Html
原始碼
  1. <div jq-scroll-top="viewerScrollTop"  
  2.      jq-scroll-left="viewerScrollLeft" 
  3. ></div> 

JavaScript
原始碼
  1. app.directive('jqScrollTop', ['$parse', function($parse){ 
  2.    return function(scope, element, attrs) { 
  3.        /*解析並取得表達式*/ 
  4.        var expr = $parse(attrs['jqScrollTop']); 
  5.  
  6.        /*監聽變數異動，並更新到 element 上*/ 
  7.        scope.$watch(attrs['jqScrollTop'], function(value) { 
  8.            element.scrollTop(value); 
  9.        }); 
  10.  
  11.        /*當 element 捲動時更新到變數上*/ 
  12.        element.on('scroll', function() { 
  13.            expr.assign(scope, element.scrollTop()); 
  14.        }); 
  15.  
  16.        /*在 destroy 時清除事件註冊*/ 
  17.        scope.$on('$destroy', function(){ 
  18.            element.off('scroll'); 
  19.        }); 
  20.    }; 
  21. }]); 
  22.  
  23. app.directive('jqScrollLeft', ['$parse', function($parse){ 
  24.    return function(scope, element, attrs) { 
  25.        /*解析並取得表達式*/ 
  26.        var expr = $parse(attrs['jqScrollLeft']); 
  27.  
  28.        /*監聽變數異動，並更新到 element 上*/ 
  29.        scope.$watch(attrs['jqScrollLeft'], function(value) { 
  30.            element.scrollLeft(value); 
  31.        }); 
  32.  
  33.        /*當 element 捲動時更新到變數上*/ 
  34.        element.on('scroll', function() { 
  35.            expr.assign(scope, element.scrollLeft()); 
  36.        }); 
  37.  
  38.        /*在 destroy 時清除事件註冊*/ 
  39.        scope.$on('$destroy', function(){ 
  40.            element.off('scroll'); 
  41.        }); 
  42.    }; 
  43. }]); 
分類： , , , , 0 回應
訂閱： 文章 (Atom)