<style>
* {
margin: 0;
padding: 0;
}
#box1 {
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
}
#box2 {
width: 100px;
height: 100px;
background-color: aquamarine;
position: absolute;
top: 100px;
left: 100px;
}
</style>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
<script>
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
bing(box1);
bing(box2);
// 提取一个专门用来设置拖拽的函数
// 参数：开启拖拽的元素
function bing(obj) {
//当鼠标在被拖拽元素上按下时，开始拖拽
obj.onmousedown = function(event) {
//捕获事件，IE8支持，其他浏览器不支持
obj.setCaptrue && obj.setCaptrue();
//兼容IE8及以下浏览器
event = event || window.event;
//获取div的偏移量
var pt = event.clientY - obj.offsetTop;
var pl = event.clientX - obj.offsetLeft;
//当鼠标移动时被拖拽元素跟随鼠标移动
document.onmousemove = function(event) {
var event = event || window.event;
//获取当前鼠标的位置
var top = event.clientY - pt;
var left = event.clientX - pl;
//获取滚动条的位置 兼容IE8及以下浏览器
var tp = document.body.scrollTop || document.documentElement.scrollTop;
var lt = document.body.scrollLeft || document.documentElement.scrollTop;
//修改div的位置
obj.style.top = top + tp + "px";
obj.style.left = left + lt + "px";
}
//当鼠标松开时，被拖拽元素固定在当前位置
document.onmouseup = function() {
//取消onmousemove事件
document.onmousemove = null;
document.onmouseup = null;
// 取消捕获事件，IE8支持，其他浏览器不支持
obj.releaseCaptrue && obj.releaseCaptrue();
}
return false;
}
}
</script>
1334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
