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

最新推荐文章于 2019-05-28 19:16:00 发布

outsiderlcy

最新推荐文章于 2019-05-28 19:16:00 发布

阅读量1.9k

点赞数

分类专栏： angularJS 文章标签： angular 自定义属性

本文链接：https://blog.csdn.net/outsiderlcy/article/details/53099105

版权

angularJS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

代码示例：

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

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

outsiderlcy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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
复制链接

扫一扫