js事件:拖拽问题

来源：互联网发布：叶利钦与普京知乎编辑：程序博客网时间：2024/06/07 14:28

编写拖拽元素的时候，往往会出现各种各样的小问题：

如何编写拖拽的代码（自己处理好兼容性问题和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>

0 0