js拖拽

最新推荐文章于 2024-08-21 15:02:16 发布

斗弟

最新推荐文章于 2024-08-21 15:02:16 发布

阅读量202

点赞数

分类专栏：原生插件文章标签： js拖拽

本文链接：https://blog.csdn.net/L_Lintellect/article/details/99751561

版权

原生插件专栏收录该内容

5 篇文章 0 订阅

订阅专栏

给盒子添加能够拖拽的功能：

html代码：

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

<head>
    <meta charset="UTF-8">
    <title>拖拽功能</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 300px;
            height: 300px;
            background: #58bc58;
            cursor: move;
            position: fixed;
        }
    </style>
</head>

<body>
    <div id="box"></div>
</body>
<script src="drag.js"></script>
<script>

    Drag('box');
    /*
        插件功能：
            *给指定盒子添加拖拽功能
        参数说明：
            *box：需要拖拽的 id 名
    */
</script>

</html>

drag.js


function Drag(dragBox) {

    let drag = document.getElementById(dragBox);
   
    //标题拖拽
    drag.onmousedown = function (evt) {
        let ox = evt.pageX - drag.offsetLeft;
        // console.log(ox)
        let oy = evt.pageY - drag.offsetTop;
        document.onmousemove = function (e) {
            let l = e.pageX - ox;
            let r = e.pageY - oy;
            //左右临界值判断 
            if (l <= 10) {
                l = 0;
            } else if (l >= window.innerWidth - drag.offsetWidth - 10) {
                l = window.innerWidth - drag.offsetWidth
            }
            // 上下临界值判断
            if (r <= 10) {
                r = 0;
            } else if (r >= window.innerHeight - drag.offsetHeight - 10) {
                r = window.innerHeight - drag.offsetHeight;
            }
            drag.style.left = l + 'px';
            drag.style.top = r + 'px';
            e.preventDefault();
        }
        drag.onmouseup = function () {
            document.onmousemove = null;
        }
    }
}