<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<sytle type="text/css">
</sytle>
<script>
function drag(obj) {
var obj=document.getElementById(obj);
obj.onmousedown=function (event) {//点下鼠标
obj.setPointerCapture&&obj.releasePointerCapture();//兼容ie8，强行捕获页面点击事件到obj
event=event||window.event;//event兼容性问题
var ol=event.clientX-obj.offsetLeft;
var ot=event.clientY-obj.offsetTop;
document.onmousemove=function (event) {//鼠标移动
event=event||window.event;
var left=event.clientX-ol;
var top=event.clientY-ot;
obj.style.left=left+"px";
obj.style.top=top+"px";
};
document.onmouseup=function () {//释放鼠标
document.onmousemove=null;//取消鼠标移动事件
document.onmouseup=null;//取消释放鼠标事件以避免点击obj以外的东西时仍然触发onmouseup
obj.releasePointerCapture&&obj.releasePointerCapture();//取消捕获
};
return false;//消除浏览器对拖拽的默认行为
};
}
window.onload=function () {
drag("box1");//调用对象
drag("box2");
}
</script>
</head>
<body>
dal
<div id="box1" style="width: 100px;height: 100px;background-color:cadetblue;position: absolute"></div>
<div id="box2" style="width: 100px;height: 100px;background-color:palevioletred;position: absolute;left: 200px;top: 200px"></div>
</body>
</html>javascript实现拖拽事件（兼容IE8）
猜你喜欢
转载自www.cnblogs.com/jujuno/p/11142353.html
今日推荐
周排行