码迷,mamicode.com
首页 > 编程语言 > 详细

javascript实现拖拽事件(兼容IE8)

时间:2019-07-06 13:18:19      阅读:787      评论:0      收藏:0      [点我收藏+]

标签:epo   OLE   释放   move   document   func   css   lse   pre   

<!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)

标签:epo   OLE   释放   move   document   func   css   lse   pre   

原文地址:https://www.cnblogs.com/jujuno/p/11142353.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!