web前端实例：JS鼠标拖拽效果

// 获取元素
var dragItem = document.querySelector('.drag-item');
var active = false;
var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;
 
// 为元素添加mousedown事件监听
dragItem.addEventListener('mousedown', function(event) {
    // 设置激活状态为true
    active = true;
 
    // 获取鼠标位置
    initialX = event.clientX - xOffset;
    initialY = event.clientY - yOffset;
 
    // 阻止默认行为（如文本选中）
    event.preventDefault();
});
 
// 添加document的mousemove事件监听
document.addEventListener('mousemove', function(event) {
    // 如果未激活，则返回
    if (!active) {
        return;
    }
 
    // 获取鼠标移动后的位置
    currentX = event.clientX - initialX;
    currentY = event.clientY - initialY;
 
    // 设置元素的位置
    setTranslate(currentX, currentY, dragItem);
});
 
// 添加document的mouseup事件监听
document.addEventListener('mouseup', function() {
    // 设置激活状态为false并重置初始坐标
    active = false;
    initialX = currentX;
    initialY = currentY;
});
 
// 设置元素的translate值
function setTranslate(xPos, yPos, el) {
    el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}

这段代码实现了一个简单的鼠标拖拽效果。通过监听元素的鼠标事件，我们可以动态地更新元素的位置。这里使用了transform属性的translate3d函数来实现位置的变换，这比直接操作style.left和style.top性能更好，尤其是在处理大量元素的情况下。