代码实现拖拽及吸附功能，具体要求如下

最新推荐文章于 2024-07-04 16:24:46 发布

swallowblank

最新推荐文章于 2024-07-04 16:24:46 发布

阅读量896

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/swallowblank/article/details/100924953

版权

前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

代码实现拖拽及吸附功能，具体要求如下：

两个绿色方块作为盒子，一个红色方块作为可拖拽方块；
红块可从上方盒子拖拽到下方盒子中；
拖拽结束后，红块被吸附到其所在盒子中距离最近的角上。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: black;
        }

        .div {
            width: 120px;
            height: 120px;
            background: gray;
        }

        #div2 {
            margin-top: 20px;

        }

        #drag {
            background-color: red;
            position: absolute;
            width: 50px;
            height: 50px;
        }
    </style>

</head>

<body>
    <div id="div1" class="div">
        <div id="drag"></div>
    </div>
    <div id="div2" class="div"></div>
    <script type="text/javascript">
        let drag = document.querySelector('#drag')
        let div1 = document.getElementById('div1')
        let div2 = document.getElementById('div2')
        // 记录div1和div2分别距离屏幕的位置
        let div1_top = div1.getBoundingClientRect().top
        let div1_left = div1.getBoundingClientRect().left
        let div2_top = div2.getBoundingClientRect().top
        let div2_left = div2.getBoundingClientRect().left

        // div1和div2所包裹的x，y的取值范围
        let allow_div1 = [div1_left, div1_left + div1.offsetWidth, div1_top, div1.offsetHeight]
        let allow_div2 = [div2_left, div2_left + div2.offsetWidth, div2_top, div2_top + div2.offsetHeight]

        drag.onmousedown = function (e) {

            // 当鼠标移动时给drag确定位置
            document.onmousemove = function (e) {
                drag.style.top = `${e.clientY}px`;
                drag.style.left = `${e.clientX}px`;
            }

            document.onmouseup = function (e) {
                document.onmousemove = null;
                document.onmouseup = null;

                let isputout = true
                // 当鼠标抬起时判断方块所在的位置
                if (e.clientX >= allow_div2[0] && e.clientX <= allow_div2[1]) {
                    if (e.clientY >= allow_div2[2] && e.clientY <= allow_div2[3]) {
                        drag.style.left = `${allow_div2[0]}px`;
                        drag.style.top = `${allow_div2[2]}px`;
                        isputout = false
                    }
                }
                // 若没有放入放回原位
                if (isputout) {
                    drag.style.left = `${allow_div1[0]}px`;
                    drag.style.top = `${allow_div1[2]}px`;
                }
            }
            return false;
        }
    </script>
</body>
</html>

swallowblank

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
代码实现拖拽及吸附功能，具体要求如下

代码实现拖拽及吸附功能，具体要求如下：两个绿色方块作为盒子，一个红色方块作为可拖拽方块；红块可从上方盒子拖拽到下方盒子中；拖拽结束后，红块被吸附到其所在盒子中距离最近的角上。<!doctype html><html><head> <meta charset="utf-8"> <title></tit...
复制链接

扫一扫

专栏目录