使用js拖拽盒子移动
所用到的方法有onmousemove , onmouseup , onmousedown
按下鼠标开始拖拽,松下及停止
此方法用函数实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标事件</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
}
#box1{
width: 100px;
height: 100px;
background-color: #000000;
position: absolute;
left: 300px;
top: 300px;
}
</style>
<script type="text/javascript">
window.onload = function(){
function drag(obj){
obj.onmousedown = function(event){
var al = event.clientX - obj.offsetLeft;//求出鼠标到盒子距离 左
var at = event.clientY - obj.offsetTop;//求出鼠标到盒子距离 上
document.onmousemove = function(event){
event = event || window.event;
var left = event.clientX;
var top = event.clientY;
obj.style.left = left - al + "px";
obj.style.top = top -at + "px";
}
document.onmouseup = function(){
document.onmousemove = null; //取消onmousemove 取消移动
document.onmouseup = null;//取消这个onmouseup
}
return false; //是为了去除浏览器的一些默认行为但IE8不支持
}
}
var box = document.getElementById("box");
var box1 = document.getElementById("box1");
drag(box1);
drag(box);
}
</script>
</head>
<body>
<div id="box"></div>
<div id="box1"></div>
</body>
</html>
这个方法是在页面中没有滚动条中实现的
如果页面过长可以参考这个方法会有些问题 可以参考上一篇解决点击进入