0
点赞
收藏
分享

微信扫一扫

js 拖拽实现

前程有光 2022-01-08 阅读 65

元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标。

代码参考

<!DOCTYPE html>
<html lang="en">
<title>拖拽</title>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #dog {
            width: 150px;
            height: 150px;
            background: red;
            position: fixed;
        }
    </style>
   
</head>

<body>
    <div id="dog"></div>
</body>

</html>
 <script>
 utils = {
    dragMov:function(dom){
        dom.style.cursor = 'move';
        dom.onmousedown = function (ev) {
                var oEvent = ev || event;
                var gapX = oEvent.clientX - dom.offsetLeft;
                var gapY = oEvent.clientY - dom.offsetTop;
                document.onmousemove = function (ev) {
                    var oEvent = ev || event;
                    //限制在可视区域内运动
                    var l = oEvent.clientX - gapX;
                    var t = oEvent.clientY - gapY;
                    var r = document.documentElement.clientWidth - dom.offsetWidth;
                    var b = document.documentElement.clientHeight - dom.offsetHeight;
                    if (l < 0) {
                        dom.style.left = 0 + "px";
                    } else if (l > r) {
                        dom.style.left = r + "px";
                    } else {
                        dom.style.left = l + "px";
                    }
                    if (t < 0) {
                        dom.style.top = 0 + "px";
                    } else if (t > b) {
                        dom.style.top = b + "px";
                    } else {
                        dom.style.top = t + "px";
                    }
                }
            }
        dom.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
        }
    }
 }
 utils.dragMov(document.getElementById('dog'));
</script>
举报

相关推荐

0 条评论