拖拽(可以封裝成指令的形式 angular )
阿新 • • 發佈:2018-12-23
//父元素的寬高,不讓其脫離寬高
//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)
};