原生js实现拖拽效果

最新推荐文章于 2023-12-05 12:40:44 发布

summer·

最新推荐文章于 2023-12-05 12:40:44 发布

阅读量215

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45774485/article/details/112595640

版权

js实现拖拽效果

实现拖拽效果，并解决全选状态（ctrl + A）拖拽问题（当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，此时会导致拖拽的异常，这是浏览器的默认行为，可以通过return false取消默认行为，但是对IE8不起作用，调用元素的setcapture()后，这个元素会把下一次所有的鼠标按下的相关事件捕获到自己身上，所以，在IE8中可以给box1设置setcapture()方法，解决默认行为，捕获一次之后）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>day6</title>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: absolute;
        }
        
        #box2 {
            width: 100px;
            height: 100px;
            background-color: bisque;
            position: absolute;
            left: 200px;
            top: 200px;
        }
    </style>
    <script>
        window.onload = function() {
            //拖拽的流程
            //1、当鼠标按下，开始拖拽
            //2、当鼠标移动时，box1跟着一起移动
            //3、当鼠标松下的时候，box1停在鼠标当前的位置
            //获取box1
            // var box1 = document.getElementById("box1");

            // box1.onmousedown = function(event) {
            //     event = event || window.event;

            //     var left2 = event.clientX - box1.offsetLeft;
            //     var top2 = event.clientY - box1.offsetTop;

            //     box1.setCapture && box1.setCapture(); //解决谷歌兼容问题
            //     document.onmousemove = function(event) {
            //         //处理事件对象兼容问题

            //         event = event || window.event;
            //         var left = event.clientX - left2;
            //         var top = event.clientY - top2;

            //         //alert("left = " + left + ",left2 = " + left2);
            //         box1.style.top = top + "px";
            //         box1.style.left = left + "px";
            //     };
            //     document.onmouseup = function() {
            //         document.onmousemove = null;
            //         document.onmouseup = null;
            //         box1.releaseCapture && box1.releaseCapture(); //解决谷歌兼容问题
            //     };
            //     // 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容
            //     //此时会导致拖拽的异常，这是浏览器的默认行为，可以通过return false取消默认行为
            //     return false; //对IE8不起作用
            //     //调用元素的setcapture()后，这个元素会把下一次所有的鼠标按下的相关事件捕获到自己身上，所以
            //     //在IE8中可以给box1设置setcapture()方法，解决默认行为，捕获一次之后



            var box1 = document.getElementById("box1");
            var box2 = document.getElementById("box2");

            drag(box1);
            drag(box2);
            //专门设置拖拽的函数
            function drag(obj) {
                obj.onmousedown = function(event) {
                    event = event || window.event;
                    var left2 = event.clientX - obj.offsetLeft;
                    var top2 = event.clientY - obj.offsetTop;
                    obj.setCapture && obj.setCapture();
                    document.onmousemove = function(event) {
                        event = event || window.event;
                        var left = event.clientX - left2;
                        var top = event.clientY - top2;
                        obj.style.top = top + "px";
                        obj.style.left = left + "px";
                    };
                    document.onmouseup = function() {
                        document.onmousemove = null;
                        document.onmouseup = null;
                        obj.releaseCapture && obj.releaseCapture();
                    };
                    return false;
                }
            };
        };
    </script>
</head>

<body>
    我是文字
    <div id="box1">

    </div>
    <div id="box2">

    </div>
</body>

</html>