拖拽(可以封装成指令的形式 angular )

来源:互联网 发布:网络语言20米是多少钱 编辑:程序博客网 时间:2024/06/05 03:15
        //父元素的宽高,不让其脱离宽高        //link:function (scope,ele,attr) {ele.parent (可以拿父元素的宽高)}        $scope.widths = $(".box").width();         $scope. heights = $(".box").height();        function draggleBefore (_this,ev){               var pos = $scope.getPos(ev);                $scope.getOffset(_this,pos);        }        //拖拽元素          //ele.on('mousedown',function(){        //  draggleBefore(_this,ev)        //});        //拖拽元素  具体        $(".date").mousedown(function(ev){                 var _this = this;                 $scope.flag = 0;                 draggleBefore(_this,ev)        }            $scope.getPos =function(ev){            var ev = ev || event;            var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;            var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;            return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};        };        $scope.getOffset = function(_this,pos){            var disX=0;            var disY=0;             //这样就可以获取鼠标坐标,比如pos.x表示鼠标横坐标            disX=pos.x-_this.offsetLeft;            disY=pos.y-_this.offsetTop;            document.onmousemove=function(ev){                {                    var oEvent=ev||event;                    var pos=$scope.getPos(oEvent);                  //防止div跑出可视框                    var left = pos.x-disX;                    var top =pos.y-disY;                    if(left < 0){                        left = 0;                    }                    if(left >$scope.widths-_this.offsetWidth){                        left = $scope.widths-_this.offsetWidth;                    }                    if(top <0){                        top =0;                    }                     if(top > $scope.heights-_this.offsetHeight) {                        top = $scope.heights-_this.offsetHeight;                    }                    _this.style.left = left+'px';                    _this.style.top = top +'px';                    //或者用jq css();                }                document.onmouseup=function() {                    document.onmousemove = null; //将move清除                    document.onmouseup = null;                    $scope.returnData(left,top);                };                return false;  //火狐的bug,要阻止默认事件            }        };        $scope.returnData = function(x,y){            console.log("x"+x+"y"+y)        };