如何拖动一个div（各种元素都类似）-蒲公英云

如何拖动一个div（各种元素都类似）

向右看齐 2023-07-15 13:19 112阅读 0赞

如何拖动一个元素
思路如下：

鼠标在元素范围里按下：进入拖动状态
鼠标抬起：取消拖动状态
鼠标在拖动状态下移动时：利用transform对元素进行移动
每次移动的位移 = 这次鼠标位置-上次鼠标位置e.clientX - lastX; e.clientY - lastY
每次移动完都记录一下上次的位置translateX,translateY

效果：
在这里插入图片描述

话不多说，简单实现如下：
html 和 css很简单：

<div id="my-div"></div>
#my-div{ 
    width: 100px;
    height: 100px;
    background: #EEAA11;
    cursor:move;
}

js：

var myDiv = document.getElementById("my-div");
var moving = false; //是否进入拖动状态
//记录上次鼠标位置
var lastX = null;
var lastY = null;
//记录上次移动完的transform位移
var translateX = 0;
var translateY = 0;
//鼠标按下，进入拖动状态
myDiv.onmousedown = function(e) { 
    moving = true;
}
//鼠标抬起，取消拖动状态
window.onmouseup = function(e) { 
    if(moving === true) { 
        moving = false;
        lastX = null;
        lastY = null;
    }
}
//移动过程
window.onmousemove = function(e) { 
    if(moving) { 
        if(lastX&&lastY) { 
            console.log("onmousemove",moving)
            pX=e.clientX - lastX;
            pY=e.clientY - lastY;
            translateX = translateX + pX;
            translateY = translateY + pY;
            myDiv.style.transform = `translateX(${ translateX}px) translateY(${ translateY}px)`
        }
        lastX = e.clientX;
        lastY = e.clientY;
    }
}