Javascript中拖拽功能的实现（已对IE低版本进行兼容化处理）

最新推荐文章于 2022-09-19 20:24:47 发布

Taco taco

最新推荐文章于 2022-09-19 20:24:47 发布

阅读量287

点赞数

分类专栏： JS 文章标签：拖拽 javascript

本文链接：https://blog.csdn.net/weixin_48475422/article/details/107214501

版权

本文介绍了一种在JavaScript中实现拖拽功能的方法，包括对div和图片的拖拽处理，并特别考虑了IE低版本的浏览器兼容性。通过三个关键事件，实现了拖拽操作，并且拓展了碰撞检测功能，当拖拽的红色div碰到绿色div时，绿色div会变为橙色。文章附带完整源码。

摘要由CSDN通过智能技术生成

在拖拽div的基础上，加了对图片拖拽的捕获处理，并对IE低版本浏览器的兼容性问题进行了处理。

该拖拽功能分为三个事件组成：

   1.鼠标按下事件 onmousedown；

   2.鼠标移动事件 onmousemove；

   3.鼠标抬起事件 onmouseup。

效果图如下：
图片拖拽
代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
   
            padding: 0;
            margin: 0;
        }

        #box {
   
            /* width: 150px;
            height: 150px; */
            /* background: red; */
            position: absolute;
            width: 100px;
        }
    </style>
</head>

<body>
    <img src="./img/1.jpg" id="box" alt="">
    <script>
        var o = document.getElementById('box');//移动的物体
        var vH=document.documentElement.clientHeight;//视图的高度
        var vW=document.documentElement.clientWidth;//视图的宽度

        //添加鼠标按下事件
        o.onmousedown = function (e) {
   
            e = e || window.event;
            // console.log('donw');
            //鼠标距离物体的相对位置(left,top)
            var disX = e.clientX - this.offsetLeft,
                disY = e.clientY - this.offsetTop;

            //判断，若是在低版本IE上，为物体添加全局捕获
            if (o.setCapture) {
   
                o.setCapture

最低0.47元/天解锁文章

Taco taco

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Javascript中拖拽功能的实现（已对IE低版本进行兼容化处理）

在拖拽div的基础上，加了对图片拖拽的捕获处理，并对IE低版本浏览器的兼容性问题进行了处理。该拖拽功能分为三个事件组成： 1.鼠标按下事件 onmousedown； 2.鼠标移动事件 onmousemove； 3.鼠标抬起事件 onmouseup。效果图如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta
复制链接

扫一扫