angular 自定义属性封装拖拽示例

来源：互联网发布：济南中金数据编辑：程序博客网时间：2024/05/16 10:52

自定义属性拖拽指令封装示例

代码示例：

<style>#div1{ width:100px; height:100px; background:red; position:absolute;}</style><script src="jquery-1.11.1.js"></script><script src="angular.min.js"></script><script>var m1 = angular.module('myApp',[]);m1.directive('myDrag',function(){    return {        restrict : 'A',           link : function(scope,element,attr){            var disX = 0;            var disY = 0;            //console.log(typeof attr.myDrag);            attr.myDrag = angular.equals(attr.myDrag,'true');            element.on('mousedown',function(ev){                var This = this;                disX = ev.pageX - $(this).offset().left;                disY = ev.pageY - $(this).offset().top;                if(attr.myDrag){                    var $line = $('<div>');                    $line.css({ width : $(this).outerWidth() , height : $(this).outerHeight() , position : 'absolute' , left : $(this).offset().left , top : $(this).offset().top , border : '1px gray dotted'});                    $('body').append($line);                }                $(document).on('mousemove',function(ev){                    if(attr.myDrag){                        $line.css('left',ev.pageX - disX);                        $line.css('top',ev.pageY - disY);                    }                    else{                        $(This).css('left',ev.pageX - disX);                        $(This).css('top',ev.pageY - disY);                    }                });                $(document).on('mouseup',function(){                    $(document).off();                    if(attr.myDrag){                        $(This).css('left',$line.offset().left);                        $(This).css('top',$line.offset().top);                        $line.remove();                    }                });                return false;            });        }    };});m1.controller('Aaa',['$scope',function($scope){}]);</script><body ng-controller="Aaa"><div id="div1" my-drag="false"></div></body>

页面结果展示：
这里写图片描述

0 0

angular 自定义属性封装 拖拽示例

angular 自定义属性封装拖拽示例