鼠标拖动图片，鼠标老是飞出图片使得拖动失效，help
日期：2014-05-16 浏览次数：20327 次
鼠标拖动图片，鼠标总是飞出图片使得拖动失效，help
下面的代码是实现鼠标拖动图片任意摆放的代码，拖动的时候如果鼠标移动太快，似乎就会离开图片表面，求助应该如何解决啊~
------解决方案--------------------
document.onmousemove = mousemove;
下面的代码是实现鼠标拖动图片任意摆放的代码，拖动的时候如果鼠标移动太快，似乎就会离开图片表面，求助应该如何解决啊~
<html>
<head>
<script>
var mouseondiv = 0; //如果鼠标移动到图片上方时为1
var mousedrag = 0; //如果鼠标是点中图片并准备拖动为1
var mouseXondiv = 0; //鼠标在图片上的坐标（相对于图片）
var mouseYondiv = 0;
function init(){
document.getElementById("dragdiv").onmouseover=function(){mouseondiv=1;};
document.getElementById("dragdiv").onmouseout=function(){mouseondiv=0;};
document.getElementById("dragdiv").onmousemove = mousemove;
document.getElementById("dragdiv").onmousedown = mousedown;
document.getElementById("dragdiv").onmouseup = mouseup;
document.getElementById("dragdiv").ondragstart = mouseunvalid;
}
function mouseunvalid(){
window.event.returnValue = false;
}
function mouseup(){
mousedrag = 0;
}
function mousedown(){
if(mouseondiv == 1){
mousedrag = 1;
mouseXondiv = event.clientX - parseInt(document.getElementById("dragdiv").style.left);
mouseYondiv = event.clientY - parseInt(document.getElementById("dragdiv").style.top);
} else {
mousedrag = 0;
}
}
function mousemove(){
if(mousedrag == 1){
document.getElementById("dragdiv").style.left = event.clientX - mouseXondiv;
document.getElementById("dragdiv").style.top = event.clientY - mouseYondiv;
}
}
</script>
</head>
<body onload="init()">
<div id="dragdiv" style="HEIGHT: 90px; LEFT: 10px; POSITION: absolute; TOP: 10px; WIDTH: 90px">
<IMG border=3 src="buddies.jpg" >
</div>
</body>
</body>
</html>
Javascript
HTML
图片
鼠标
函数
------解决方案--------------------
document.onmousemove = mousemove;
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
