84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
AngulatrJs中的draggable和droppable怎么封装成指令
人生最曼妙的风景,竟是内心的淡定与从容!
我恰好封装过,代码如下。使用方法同ng-click,其实这就是用ng-click的代码改的。你可以根据自己的需要修改。
.directive('myDragstart', function ($parse) { return { restrict: 'A', link(scope, element, attrs) { var fn = $parse(attrs.myDragstart); element[0].draggable = 'true'; element[0].ondragstart = function (e) { e.dataTransfer.effectAllowed = 'move'; return scope.$apply(function () { return fn(scope, {$event: e}); }); }; } }; }).directive('myDrop', function ($parse) { return { restrict: 'A', link(scope, element, attrs) { var fn = $parse(attrs.myDrop); element[0].ondrop = function (e) { e.preventDefault() return scope.$apply(function () { return fn(scope, {$event: e}); }); }; element[0].ondragover = function(e) { e.preventDefault(); return true; }; } }; });
拿去吧,刚学ng时候写的,给你参考下
var dragSrcEl; directives.directive('ngDragstart',function($rootScope){ return{ restrict: 'A', link: function(scope, element) { element.bind('dragstart', function(e){ $rootScope.dragging = true; if( e.target.parentNode.className.search('aaa') !== -1){ e.target.parentNode.style.opacity = '0.4'; dragSrcEl = e.target.parentNode; e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setDragImage(e.target.parentNode,80,5); e.dataTransfer.setData('text/html', e.target.parentNode.innerHTML); }else if(e.target.className.search('jstree-anchor') != -1){ dragSrcEl = e.target; e.dataTransfer.effectAllowed = 'move'; if($rootScope.hover_node){ var id = $rootScope.hover_node['original']['metadata']['id']; e.dataTransfer.setData('text', id.toString()); } } else{ e.preventDefault(); } }); } }; }); directives.directive('ngDragover',function(){ return{ restrict: 'A', link: function(scope, element) { element.bind('dragover', function(e) { if (e.preventDefault && e.target.className.search('aaa') !== -1) { e.preventDefault(); } else if (e.preventDefault && e.target.className.search('jstree-anchor') !== -1) { e.preventDefault(); } e.dataTransfer.dropEffect = 'move'; return false; }); } }; }); directives.directive('ngDragend',function(){ return{ restrict: 'A', link: function(scope, element) { element.bind('dragend', function(e) { e.target.style.opacity='1.0'; e.target.parentNode.style.opacity='1.0'; }); } }; }); directives.directive('ngDrop',function($rootScope){ return{ restrict: 'A', link: function(scope, element) { element.bind('drop', function(e) { if (e.stopPropagation) { e.stopPropagation(); } if (e.currentTarget.className.search('aaa') !== -1 && dragSrcEl.className === e.currentTarget.className) { var aId = $(e.currentTarget).find('.paramId').text(); var bId = $(dragSrcEl).find('.paramId').text(); $rootScope.$broadcast('swapPod',[aId,bId]); }else if(dragSrcEl.className.search('jstree-anchor') !== -1 &&(e.currentTarget.className === "podList" || e.currentTarget.className.search('aaa') !== -1)){ var id = e.dataTransfer.getData('text'); $rootScope.$broadcast('addPod',id); } $rootScope.dragging = false; return false; }); } }; });
我恰好封装过,代码如下。使用方法同ng-click,其实这就是用ng-click的代码改的。你可以根据自己的需要修改。
拿去吧,刚学ng时候写的,给你参考下