拖拽元素的实现

最新推荐文章于 2024-04-02 08:43:45 发布

徐丹

最新推荐文章于 2024-04-02 08:43:45 发布

阅读量211

点赞数 1

分类专栏：前端文章标签： html css 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_68160847/article/details/128675910

版权

前端专栏收录该内容

54 篇文章 0 订阅

订阅专栏

拖拽元素实现关键在于给元素设置定位，给元素设置 left 以及 top 值实现移动

这里需要知道以下几个dom属性

window.innerWidth : 浏览器窗口的可见宽度

window.innerHeight : 浏览器窗口的可见高度

offsetWidth: 返回元素的宽

offsetHeight：返回元素的高

offsetLeft: 元素左边缘距离浏览器左边缘的距离

offsetTop: 元素上边缘距离浏览器上边缘的距离

clientX: 鼠标横坐标

clientY: 鼠标纵坐标

用到的鼠标事件：

onmousedown: 鼠标按下触发

onmousemove: 鼠标移动触发

onmouseup:鼠标释放触发

思路：

1、鼠标按下触发事件，获取鼠标按下原点坐标，计算鼠标按下的位置距离元素的左边和上边的距离，

2、在鼠标按下的事件里面设置鼠标移动事件，其对象应该是document，在整个网页内移动。再获取鼠标坐标减去鼠标在元素内的位置距离，以保证鼠标移动之后原点在鼠标按下时的位置。将其赋值给left和top，由于设置了定位，元素跟着鼠标移动就实现了。最后限制元素最大的left和top，使其不能超出浏览器可视区域。

3、鼠标释放时，利用null清除鼠标移动事件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            div {
                width: 200px;
                height: 200px;
                background: palegreen;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div></div>
        <script>
            var div = document.querySelector('div')
            //获取元素最大能移动到的距离
            var maxLeft = window.innerWidth - div.offsetWidth
            var maxTop = window.innerHeight - div.offsetHeight
            div.onmousedown = function (e) {
                e = e || window.event
                //获取鼠标按下的原点距离盒子边缘的距离
                var l = e.clientX - div.offsetLeft
                var t = e.clientY - div.offsetTop
                document.onmousemove = function (e) {
                    //兼容IE浏览器，event事件对象
                    e = e || window.event
                    //移动之后使鼠标在按下时的位置
                    var x = e.clientX - l
                    var y = e.clientY - t
                    //限定元素只能在浏览器可视窗口内移动
                    x = x < 0 ? 0 : x > maxLeft ? maxLeft : x
                    y = y < 0 ? 0 : y > maxTop ? maxTop : y
                    div.style.left = x + 'px'
                    div.style.top = y + 'px'
                }
                div.onmouseup = function () {
                    document.onmousemove = null
                }
            }
        </script>
    </body>
</html>

徐丹

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
拖拽元素的实现

window.innerWidth : 浏览器窗口的可见宽度window.innerHeight : 浏览器窗口的可见高度offsetWidth: 返回元素的宽offsetHeight：返回元素的高offsetLeft: 元素左边缘距离浏览器左边缘的距离offsetTop: 元素上边缘距离浏览器上边缘的距离clientX: 鼠标横坐标clientY: 鼠标纵坐标
复制链接

扫一扫