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

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

代码示例:

<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 = $('
'); $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>

页面结果展示:
angular 自定义属性封装 拖拽示例_第1张图片

你可能感兴趣的:(angularJS)