js基础 — 简单易懂，拖拽事件（三）

爱吃果蔬的猫

已于 2023-07-25 14:35:27 修改

阅读量184

点赞数 1

分类专栏： javascript 文章标签： javascript css css3

于 2023-07-25 14:16:40 首次发布

本文链接：https://blog.csdn.net/qq_53895518/article/details/131916671

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript实现简单的拖拽功能，并通过提取函数实现代码封装，以便于复用。文章中给出了HTML、CSS和JS代码示例，展示了如何为两个div元素开启拖拽功能，以及在鼠标按下、移动和松开时如何处理拖拽动作。此外，还讨论了浏览器默认行为的处理和setCapture、releaseCapture方法的兼容性问题。

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

对 js基础 — 简单易懂，拖拽事件（二），提取函数进行封装，容易复用。

html代码：

     我是一段文字
    <div id="box1">box1</div>
    <div id="box2">box2</div>

css代码：

    #box1 {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            position: absolute;
        }

        #box2 {
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            left: 200px;
            top: 200px;
        }

js代码：

 window.onload = function () {
            // 获取 box1  box2
            var box1 = document.getElementById("box1");
            var box2 = document.getElementById("box2");
            // 开启box1d的拖拽
            drag(box1);
            //开启box2的拖拽
            drag(box2);
        };
        // 提取一个专门用来拖拽的函数
        // 参数 ：开启拖拽的元素 obj
        function drag(obj) {
            // 1、当鼠标在被拖拽元素按下时，开始拖拽  onmousedown
            obj.onmousedown = function () {
                //设置box1捕获所有鼠标按下事件
                // if( box1.setCapture){
                //     box1.setCapture();
                // }
                obj.setCapture && obj.setCapture();
                // 为document 绑定一个onmousemove事件
                document.onmousemove = function (event) {
                    event = event || window.event;
                    // 2、当鼠标移动时，被拖拽元素跟随鼠标移动  onmousemove
                    // 获取鼠标的坐标
                    var left = event.clientX;
                    var top = event.clientY;
                    // 修改box1的位置
                    obj.style.left = left + "px";
                    obj.style.top = top + "px";
                };
                // 3、当鼠标松开时，被拖拽元素固定在当前位置  onmouseup
                document.onmouseup = function () {
                    document.onmousemove = null;
                    // 取消document的onmouseup事件
                    document.onmouseup = null;
                    //当鼠标松开时，取消对事件的捕获
                    // if( box1.releaseCapture){
                    //     box1.releaseCapture();
                    // }
                    obj.releaseCapture && obj.releaseCapture();
                }
                /*
                当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中的搜索内容
                此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，如果不希望发生这个行为，
                则可以通过return  fasle 来取消默认行为   但这招对IE8 不起作用
                setCapture() 只有IE支持，但在火狐中调用时不会报错，而chrome 会报错
                */
                return false;
            };
        }