div js 拖拽方法

最新推荐文章于 2024-07-17 09:19:35 发布

青天魔王

最新推荐文章于 2024-07-17 09:19:35 发布

阅读量328

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/leixu1027/article/details/80519677

版权

web前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

找到 id

var elmnt = document.getElementById('myid');
dragElement(elmnt)                // elmnt

    dragElement(elmnt) {
        let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
        if (document.getElementById(elmnt.id)) {
            elmnt.onmousedown = dragMouseDown;
        }

        function dragMouseDown(e) {

            e = e || window.event;
            pos3 = e.clientX;
            pos4 = e.clientY;
            document.onmouseup = closeDragElement;
            document.onmousemove = elementDrag;
        }

        function elementDrag(e) {
            e = e || window.event;
            pos1 = pos3 - e.clientX;
            pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;
            elmnt.style.top = (elmnt.offsetTop - pos2) + 'px';
            elmnt.style.left = (elmnt.offsetLeft - pos1) + 'px';
        }

        function closeDragElement() {
            document.onmouseup = null;
            document.onmousemove = null;
        }
    }