挪动的div。
日期：2014-05-16 浏览次数：20448 次
移动的div。。。
<!doctype html>
<html>
<head>
<style>
div {width:200px;height:200px;background:red;position:absolute;}
</style>
<script>
var Drag=function(obj) {
var x,y,ox,oy;
var nx,ny;
var objmove=new Boolean(false);
obj.onmousedown=function(event) {
if(event.button==0) {
obj.style.cursor="move";
ox=obj.offsetLeft;
oy=obj.offsetTop;
x=event.clientX;
y=event.clientY;
objmove=true;
};
};
obj.onmousemove=function(event) {
if(objmove==true) {
nx=ox+event.clientX-x;
ny=oy+event.clientY-y;
obj.style.left=nx+"px";
obj.style.top=ny+"px";
}
};
obj.onmouseup=function() {
objmove=false;
obj.style.cursor="default";
};
};
window.onload=function() {
var oDiv=document.getElementsByTagName("div")[0];
Drag(oDiv);
}
</script>
</head>
<body>
<div></div>
</body>
</html>
为什么只有第一次正确，第二次移动时就有问题了。。。求解答。。。
------解决方案--------------------
在IE里面，左击的event.button = 1，不是0
------解决方案--------------------
ff下尝试禁止选中
------解决方案--------------------
------解决方案--------------------
建议楼主用JQuery。。。。
以下是我自己写的，但愿能帮助你。
/* JQuery DIV拖动效果 */
var i_ismove = false; //记录鼠标是否点下
var i_top; //记录DIV左上角纵坐标
var i_left; //记录DIV左上角横坐标
var i_mouse_top; //记录鼠标纵坐标
var i_mouse_left; //记录鼠标横坐标
$(function(){
$("#info_top").mousedown(function(e) {
i_ismove = true;//记录鼠标被点下
i_top = parseInt($("#infomation").css("top").substring(0,$("#infomation").css("top").length - 2));//得到DIV原来纵坐标
i_left = parseInt($("#infomation").css("left").substring(0,$("#infomation").css("left").length - 2));//得到DIV原来横坐标
i_mouse_left = e.originalEvent.x|| e.originalEvent.layerX || 0; /* 拿到原来鼠标横坐标 */
i_mouse_top = e.originalEvent.y|| e.originalEvent.layerY || 0; /* 拿到原来鼠标纵坐标 */
});
$("body").mousemove(function(e) {
if (i_ismove) {
var xx = e.originalEvent.x|| e.originalEvent.layerX || 0;//得到当前鼠标横坐标
var yy = e.originalEvent.y|| e.originalEvent.layerY || 0;//得到当前鼠标纵坐标
$("#infomation").css("left",xx - i_mouse_left + i_left);//计算得到当前DIV横坐标
$("#infomation").css("top",yy - i_mouse_top + i_top);//计算得到当前DIV纵坐标
}
});
$("#info_top").mouseup(function() {
i_ismove = false; //记录鼠标弹起
});
});
<!doctype html>
<html>
<head>
<style>
div {width:200px;height:200px;background:red;position:absolute;}
</style>
<script>
var Drag=function(obj) {
var x,y,ox,oy;
var nx,ny;
var objmove=new Boolean(false);
obj.onmousedown=function(event) {
if(event.button==0) {
obj.style.cursor="move";
ox=obj.offsetLeft;
oy=obj.offsetTop;
x=event.clientX;
y=event.clientY;
objmove=true;
};
};
obj.onmousemove=function(event) {
if(objmove==true) {
nx=ox+event.clientX-x;
ny=oy+event.clientY-y;
obj.style.left=nx+"px";
obj.style.top=ny+"px";
}
};
obj.onmouseup=function() {
objmove=false;
obj.style.cursor="default";
};
};
window.onload=function() {
var oDiv=document.getElementsByTagName("div")[0];
Drag(oDiv);
}
</script>
</head>
<body>
<div></div>
</body>
</html>
为什么只有第一次正确，第二次移动时就有问题了。。。求解答。。。
------解决方案--------------------
在IE里面，左击的event.button = 1，不是0
------解决方案--------------------
ff下尝试禁止选中
------解决方案--------------------
------解决方案--------------------
建议楼主用JQuery。。。。
以下是我自己写的，但愿能帮助你。
/* JQuery DIV拖动效果 */
var i_ismove = false; //记录鼠标是否点下
var i_top; //记录DIV左上角纵坐标
var i_left; //记录DIV左上角横坐标
var i_mouse_top; //记录鼠标纵坐标
var i_mouse_left; //记录鼠标横坐标
$(function(){
$("#info_top").mousedown(function(e) {
i_ismove = true;//记录鼠标被点下
i_top = parseInt($("#infomation").css("top").substring(0,$("#infomation").css("top").length - 2));//得到DIV原来纵坐标
i_left = parseInt($("#infomation").css("left").substring(0,$("#infomation").css("left").length - 2));//得到DIV原来横坐标
i_mouse_left = e.originalEvent.x|| e.originalEvent.layerX || 0; /* 拿到原来鼠标横坐标 */
i_mouse_top = e.originalEvent.y|| e.originalEvent.layerY || 0; /* 拿到原来鼠标纵坐标 */
});
$("body").mousemove(function(e) {
if (i_ismove) {
var xx = e.originalEvent.x|| e.originalEvent.layerX || 0;//得到当前鼠标横坐标
var yy = e.originalEvent.y|| e.originalEvent.layerY || 0;//得到当前鼠标纵坐标
$("#infomation").css("left",xx - i_mouse_left + i_left);//计算得到当前DIV横坐标
$("#infomation").css("top",yy - i_mouse_top + i_top);//计算得到当前DIV纵坐标
}
});
$("#info_top").mouseup(function() {
i_ismove = false; //记录鼠标弹起
});
});
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
