javascript实现拖拽事件（兼容IE8）

最新推荐文章于 2022-03-09 19:28:41 发布

yeqingdong

最新推荐文章于 2022-03-09 19:28:41 发布

阅读量833

点赞数

文章标签： javascript 拖拽

本文链接：https://blog.youkuaiyun.com/Vampirecally/article/details/102069864

版权

本文详细介绍了如何使用JavaScript实现拖拽功能，包括在浏览器兼容性方面特别针对IE8的处理，让你轻松掌握网页元素的拖放交互技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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