编写拖拽元素的时候,往往会出现各种各样的小问题:
如何编写拖拽的代码(自己处理好兼容性问题和position问题):
1.首先要获取鼠标点下时候,与拖拽元素的相对位置。定义这个相对位置的坐标disX;disY。
即:var disX=0;var disY=0;
2.鼠标按下(onmousedown)时,获取这个相对位置的坐标(disX,disY)。disX=鼠标的坐标的X-元素的X坐标(left值);disY=鼠标的坐标的Y-元素的Y坐标(top值)。
即:disX=Event.clientX-obj.offersetLeft;disY=Event.clientY-obj.offersetTop;
3.再设置拖拽元素(onmousemove)的坐标位置(到左边距离X,到顶部距离Y)。X=鼠标的坐标的X-相对坐标的X;Y=鼠标的坐标的Y-相对坐标的Y;
即:obj.style.left=Event.clientX-disX;obj.style.top=Event.clientY-disY;
这里要注意拖拽的时候,触发事件是document.onmousemove,不然会元素可能出现跟不上鼠标的移动速度(可能是电脑的计算速度没有达到秒天秒地的情况导致的)。
4.最后设置鼠标点击弹起时,要取消按下和拖拽两个触发事件,不然会出现漏洞:
即:document.onmouseup=function (){document.onmousemove=null;document.onmouseup=null;};
5.此时会有不同的问题出现(元素飞出屏幕,无法再次“选中”该元素,火狐浏览器还会出现残影等等):
处理元素不飞出屏幕的情况:元素的left值(X坐标)的范围是0<X<可视区域的宽-元素自身的宽;元素的top值(Y坐标)的范围是0<X<可视区域的高-元素自身的高;
(写在步骤3事件里)即:
if(obj.style.left<0){obj.style.left=0;}
else if(obj.style.left>document.documentElement.clientWidth-obj.offsetWidth)
{obj.style.left=document.documentElement.clientWidth-obj.offsetWidth;}
if(obj.style.top<0){obj.style.top=0;}
else if(obj.style.top>document.documentElement.clientHeight-obj.offsetHeight)
{obj.style.top=document.documentElement.clientHeight-bj.offsetHeight;}
残影问题:在事件最后return false;
<script>
window.onload = function()
{
var
oDiv = document.getElementById('div');
var
disX = 0;
var
disY = 0;
oDiv.onmousedown = function(ev)
{
var
oEvent = ev || event;
disX = oEvent.clientX - oDiv.offsetLeft;
disY = oEvent.clientY - oDiv.offsetTop;
document.onmousemove = function(ev)
{
var
oEvent = ev || event;
var
l = oEvent.clientX - disX;
var
t = oEvent.clientY - disY;
if(l < 0)
{
l = 0;
} else
if(l > document.documentElement.clientWidth - oDiv.offsetWidth)
{
l = document.documentElement.clientWidth - oDiv.offsetWidth;
}
if(t < 0)
{
t = 0;
} else
if(t > document.documentElement.clientHeight - oDiv.offsetHeight)
{
t = document.documentElement.clientHeight - oDiv.offsetHeight;
}
oDiv.style.left = l + 'px';
oDiv.style.top = t + 'px';
};
document.onmouseup = function()
{
document.onmousemove = null;
document.onmouseup = null;
};
return
false;
};
};
</script>
<body>
<div id="div" style="height:200px;width:200px;background:red;"></div>
</body>