如何用CSS类重置top、left、transition属性以实现拖拽功能？

原本的拖拽效果通过Object.assign(target.style, ...)在mousedown和mouseup事件中手动修改样式实现。尝试改用.dragging类管理拖拽中的样式后，移除该类时left、top行内样式及过渡效果会残留，导致下次拖拽起点异常且带有过渡延迟，破坏了原功能。需要用类的方式实现和原代码一致的拖拽效果。

核心思路是在移除.dragging类的同时重置残留的行内样式，配合CSS类的优先级管理过渡效果，确保每次拖拽的起点正确。

修改后的完整代码 #

JavaScript 部分

(function() {
    let targets = document.querySelectorAll('.draggable');
    let offsetX;
    let offsetY;
    targets.forEach((target) => {
        target.isMouseDown = false;
        target.addEventListener('mousedown', (e) => {
            if (e.buttons === 1) {
                // 每次拖拽前重新获取初始位置，避免残留样式影响
                target.initialOffsetLeft = target.offsetLeft;
                target.initialOffsetTop = target.offsetTop;
                target.classList.add('dragging');
                target.isMouseDown = true;
                offsetX = target.initialOffsetLeft + e.offsetX;
                offsetY = target.initialOffsetTop + e.offsetY;
            }
        });
        document.addEventListener('mouseup', (e) => {
            e.preventDefault();
            target.isMouseDown = false;
            target.classList.remove('dragging');
            // 重置行内left/top样式，让元素回到默认位置
            target.style.left = '';
            target.style.top = '';
        });
        document.addEventListener('mousemove', (e) => {
            e.preventDefault();
            if (target.isMouseDown) {
                target.style.left = e.pageX - offsetX + 'px';
                target.style.top = e.pageY - offsetY + 'px';
            }
        });
    });
})();

CSS 部分

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif
}

.draggable {
    display: flex;
    padding: 10px 12px;
    border-radius: 5px;
    margin: 0 5px 11px 0;
    background-color: #000000;
    cursor: grab;
    flex-grow: 1;
    color: #ffffff;
    border: 1px solid #6c757d;
    transition: all 0.5s ease;
    z-index: unset;
    position: relative; /* 默认设为relative，避免切换类时布局跳变 */
}

.dragging {
    z-index: 10000;
    transition: none; /* 拖拽时禁用过渡 */
    cursor: grabbing;
}

.my-card-group {
    margin-top: 30px;
    background-color: #000000;
    margin-right: 2%;
    margin-left: 2%;
    border: 1px solid #6c757d;
}

HTML 部分

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="card group">
  <div class="my-card-group">
    <div class="card-body">
      <div class="draggable">
        Lorem ipsum dolor sit amet 1
      </div>
      <div class="draggable">
        Lorem ipsum dolor sit amet 2
      </div>
      <div class="draggable">
        Lorem ipsum dolor sit amet 3
      </div>
    </div>
  </div>
</div>

关键修改说明 #

• 重置行内样式：mouseup时清空left和top的行内样式，让元素回到默认布局位置，避免残留值影响下次拖拽起点
• 稳定布局基础：将position: relative移到.draggable默认类中，避免添加/移除.dragging类时触发布局跳变
• 动态获取初始位置：每次mousedown时重新获取元素的初始偏移量，确保拖拽起点始终准确
• 类样式精准覆盖：.dragging类仅修改拖拽时需要的样式（层级、过渡、光标），其余样式保持默认，减少冲突

内容的提问来源于stack exchange，提问作者nlblack323