html-边框不允许拖拽,js鼠标拖拽，不能拖出指定对象，吸附作用（类似PS工具框）...

鼠标拖拽，不能拖出指定对象，吸附作用(类似PS工具框)

#div1{width: 100px;height: 100px;background: red;position: absolute;}

#div2{width: 700px;height: 500px;background: #ccc;position: relative;margin:100px auto;}

window.οnlοad=function(){

var oDiv=document.getElementById('div1');

var oDiv2=document.getElementById('div2');

var disX=0;

var disY=0;

oDiv.οnmοusedοwn=function(ev){

var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft;

disY=oEvent.clientY-oDiv.offsetTop;

document.οnmοusemοve=function(ev){

var oEvent=ev||event;

var left=oEvent.clientX-disX;

var top=oEvent.clientY-disY;

var right=oDiv2.offsetWidth-oDiv.offsetWidth;

var bottom=oDiv2.offsetHeight-oDiv.offsetHeight;

//让div出不去浏览器

if(left<50){//吸附距离

left=0;

}else if(left>right){

left=right;

}

if(top<50){

top=0;

}else if(top>bottom){

top=bottom;

}

oDiv.style.left=left+'px';

oDiv.style.top=top+'px';

};

document.οnmοuseup=function(ev){

document.οnmοusemοve=null;

document.οnmοuseup=null;

};

return false;//火狐阻止默认事件，不然会有bug，解决下面div一定要加内容的bug

}

}

标签：PS,document,oDiv,鼠标,top,js,var,oEvent,ev

来源： https://www.cnblogs.com/sunnywindycloudy/p/12997402.html