在一个固定的容器里面模拟拖拽某个元素放在画布任意位置（拖拽模块大于父元素，拖拽模块小于父元素）

#说一下起因吧#
我在一个固定的画布（容器）上面要放一个组织结构图，我嫌滚动条不好看并且操作不方便。所以统一写了个在画布里面拖拽溢出容器的方法（顺便非溢出的也一起做了）。记录一下可能以后还要用，用也用得着。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>拖拽模块</title>
        <style>
            .main-div {
                width: 600px;
                height: 600px;
                border: 1px solid #000000;
                position: relative;
                margin: 100px auto;
                overflow: hidden;
            }
            .box-div {
                width: 100px;
                height: 100px;
                border-radius: 100px;
                position: absolute;
                background: #000;
            }
        </style>

    </head>
    <body>
        <div class="main-div">
            <div class="box-div" id="dragMoveDiv"></div>
        </div>
        <script>
            var sL = 0
            var sT = 0
            function DragDiv(id){
                let moveDiv = document.getElementById(id)
                let parentMoveDiv = moveDiv.parentNode
                let isDown = false
                let x = 0
                let y = 0
                // 鼠标按下去
                moveDiv.onmousedown = function(e) {
                    isDown = true
                    moveDiv.style.cursor = 'move';
                    //获取x坐标和y坐标
                    x = e.clientX
                    y = e.clientY
                    //获取左部和顶部的偏移量
                    sL = moveDiv.offsetLeft
                    sT = moveDiv.offsetTop
                }
                // 鼠标移动（我设置的是在window里面）
                window.onmousemove = function(e) {
                    if (isDown === false) {
                      return;
                    }
                    //获取x和y 计算偏移量，sL，sT 是原来的初始位置，所以加上原来的位置。
                    let nx = e.clientX - x + sL
                    let ny = e.clientY - y + sT
                    // 如果超出父div的区域就以父div的边界为准
                    const compareWidthNum = parentMoveDiv.offsetWidth - moveDiv.offsetWidth
                    const compareHeightNum = parentMoveDiv.offsetHeight - moveDiv.offsetHeight
                    // x
                    if (compareWidthNum > 0 ) {
                        if (nx < 0) {
                            moveDiv.style.left = '0px'
                        } else if (nx > compareWidthNum) {
                            moveDiv.style.left = compareWidthNum  + 'px'
                        } else {
                            moveDiv.style.left = nx + 'px'
                        }
                    } else {
                        if (nx > 0) {
                            moveDiv.style.left = '0px'
                        } else if (nx < compareWidthNum){
                            moveDiv.style.left = compareWidthNum  + 'px'
                        } else {
                            moveDiv.style.left = nx + 'px'
                        }
                    }
                    // y
                    if (compareHeightNum > 0) {
                        if (ny < 0) {
                             moveDiv.style.top = '0px'
                        } else if (ny > compareHeightNum) {
                            moveDiv.style.top = compareHeightNum + 'px'
                        } else {
                            moveDiv.style.top = ny + 'px'
                        }
                    } else {
                        if (ny > 0)  {
                            moveDiv.style.top = '0px'
                        } else if (ny < compareHeightNum) {
                            moveDiv.style.top = compareHeightNum + 'px'
                        } else {
                            moveDiv.style.top = ny + 'px'
                        }
                    }
                }
                // 鼠标抬上来
                window.onmouseup = function(e) {
                    isDown = false
                    moveDiv.style.cursor = 'default'
                }
            }
            // 传入拖拽元素的id执行拖拽方法
            DragDiv('dragMoveDiv')
        </script>

    </body>
</html>

最后编辑于：2020.11.05 10:30:17