前端拖拽---------小计

最新推荐文章于 2024-10-22 18:53:29 发布

海龟先生plus

最新推荐文章于 2024-10-22 18:53:29 发布

阅读量168

点赞数

CC 4.0 BY-SA版权

分类专栏： js html 文章标签： js

本文链接：https://blog.csdn.net/qq_45219069/article/details/108397960

js 同时被 2 个专栏收录

70 篇文章

订阅专栏

html

7 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现的拖拽功能，该功能允许用户在页面上自由拖动元素，并通过边界值限制防止元素超出可视区域。代码示例详细展示了如何捕捉鼠标事件并更新元素位置，同时确保元素不会移出窗口边界。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

拖拽+边界值限定

 <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .move-box{
            width: 420px;
            height: 560px;
            background:#f40 ;
            position: absolute;
            margin: 0 auto;
            top: 30px;
            left: 30px;
        }
        .move-model{
            position: relative;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
        <div class="move-box">宽100高100</div>
    <script>
        let draw = document.getElementsByClassName('move-box')[0]
            // 盒子宽高
            let width = draw.offsetWidth
            let height = draw.offsetHeight
            // 记录鼠标按下位置
            let dX,dY
            draw.onmousedown=function(e){
                dX = e.offsetX
                dY = e.offsetY
              // 小细节 移动事件绑定在 document 上
                document.onmousemove=function(eD){
                    let top = eD.pageY - dY
                    let left = eD.pageX - dX
                    // 边界值限定
                    let maxLeft = window.innerWidth - width - 30
                    let maxTop = window.innerHeight - height - 30
                    draw.style.top = top > maxTop ? maxTop + 'px' : (top > 30 ? top + 'px' : '30px')
                    draw.style.left = left > maxLeft ? maxLeft + 'px' : (left > 30 ? left + 'px' : '30px')
                    
                }
                document.onmouseup = function(e){
                    if(document.onmousemove && typeof document.onmousemove === 'function'){
                        document.onmousemove=null
                        document.onmouseup = null
                    }
                }
                // 阻止默认行为
                return false
            }
    </script>
</body>

在这里插入图片描述