1. 程式人生 > >拖拽(可以封裝成指令的形式 angular )

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

        //父元素的寬高,不讓其脫離寬高
        //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) };