做一个拖拽的小功能

做了一个拖拽功能，感觉有点卡顿。
思路比较简单，滑块拖动的时候限制边界条件就好了，完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>拖拽</title>
    <style>
    .divClass_Wrapper{
        width: 400px;
        height: 200px;
        background: pink;
        margin: 20px auto;
        position: relative;
    }
    .divClass_Drag{
        position: absolute;
        left: 0;
        top: 0;
        width: 40px;
        height: 40px;
        background: paleturquoise;
    }
    </style>
</head>
<body>
    <div class="divClass_Wrapper">
        <div class="divClass_Drag">
        </div>
    </div>

    <script>
        window.onload = function() {
            var iWrapper = document.getElementsByClassName('divClass_Wrapper')[0];
            // console.log(iWrapper);
            var iDrag = document.getElementsByClassName('divClass_Drag')[0];
            // 设置标识符
            var isDrag = false;
            var x;
            var y;
            iDrag.onmousedown = function(env) {
                // console.log(ev);
                var env = window.event || env;
                x = env.clientX - this.offsetLeft;
                y = env.clientY - this.offsetTop;
                // console.log(x,y)
                this.style.cursor="move"; 
                isDrag = true;
            }
            iDrag.onmousemove = function(e) {
                // console.log(e);
                if(isDrag) {
                    var e = window.event || e;
                    iDrag.style.left = (e.clientX - x) + 'px'
                    iDrag.style.top = (e.clientY - y) + 'px';
                    //判断小于边界
                    if(parseInt(iDrag.style.left) < 0) {
                        iDrag.style.left = 0;
                    }
                    if(parseInt(iDrag.style.top) < 0) {
                        iDrag.style.top = 0;
                    }
                    // 判断大于边界
                    // 如果左右移动的距离大于 大盒子 - 小盒子的长度
                    if(parseInt(iDrag.style.left) > iWrapper.clientWidth - iDrag.clientWidth) {
                        iDrag.style.left = (iWrapper.clientWidth - iDrag.clientWidth)+'px'
                    }
                    if(parseInt(iDrag.style.top) > iWrapper.clientHeight - iDrag.clientHeight) {
                        iDrag.style.top = (iWrapper.clientHeight - iDrag.clientHeight)+'px'
                    }
                }
            }
            iDrag.onmouseup = function () {
                isDrag = false;
                iDrag.style.cursor = 'pointer'
            } 
        }
    </script>
</body>
</html>
做一个拖拽的小功能

猜你喜欢
