JavaScript 如何通过单击和拖动动态移动 Div

JavaScript 如何通过单击和拖动动态移动 Div

html
    
    
    
    

javascript
// 获取目标元素
const myDiv = document.getElementById('myDiv');
// 记录鼠标按下时的初始位置
let initialX = 0;
let initialY = 0;
// 标识是否正在拖动
let isDragging = false;
// 添加鼠标按下事件监听器
myDiv.addEventListener('mousedown', (event) => {
    // 记录鼠标按下时的初始位置
    initialX = event.clientX;
    initialY = event.clientY;
    // 标记为正在拖动
    isDragging = true;
});
// 添加鼠标移动事件监听器
document.addEventListener('mousemove', (event) => {
    // 如果没有正在拖动，则不做任何操作
    if (!isDragging) {
        return;
    }
    // 计算鼠标移动的距离
    const deltaX = event.clientX - initialX;
    const deltaY = event.clientY - initialY;
    // 更新目标元素的位置
    myDiv.style.left = `${myDiv.offsetLeft + deltaX}px`;
    myDiv.style.top = `${myDiv.offsetTop + deltaY}px`;
    // 更新鼠标按下时的初始位置
    initialX = event.clientX;
    initialY = event.clientY;
});
// 添加鼠标松开事件监听器
document.addEventListener('mouseup', () => {
    // 标记为停止拖动
    isDragging = false;
});

html