Sortable.js实现拖拽释放后才移动其他元素的技术问询

要实现拖拽过程中其他元素保持位置不变，仅在释放拖拽元素后才完成位置交换，可通过修改Sortable.js的配置及对应CSS样式来实现：

修改JavaScript配置 #

开启Sortable的交换模式，并调整相关类名配置：

var lgh = document.querySelectorAll('.list-group-header'), i = 0;
for(i; i < lgh.length; i++){
    new Sortable(lgh[i], {
        group: 'stored',
        draggable: '.board-header-item',
        forceFallback: true,
        dragoverBubble: true,
        animation: 150,
        swap: true, // 启用交换模式，拖拽时不实时调整其他元素位置
        swapClass: 'sortable-swap-highlight', // 交换时高亮目标元素的类名
        ghostClass: 'sortable-ghost-hidden' // 隐藏默认的占位元素类名
    });
}

调整CSS样式 #

添加隐藏占位元素和高亮交换目标的样式：

/* 隐藏默认的占位元素，避免拖拽时出现空白位置 */
.sortable-ghost-hidden {
    opacity: 0;
    visibility: hidden;
}

/* 拖拽时高亮可交换的目标元素，提供视觉反馈 */
.sortable-swap-highlight {
    background-color: #e0e0e0;
}

.sortable-fallback {transform: rotate(1deg);}
.sortable-fallback{cursor: pointer !important}
.list-group-header .sortable-fallback {transform: rotate(2deg);background: white}
.list-group-header .sortable-fallback {cursor: pointer !important}    
.board-header-item{display: inline-block;padding: 7px 10px;border: 1px solid black;text-align: center}

HTML部分（无需修改，仅确保Sortable.js文件正确引入） #

<script src="Sortable.js"></script>
<div class="list-group-header">
    <div class="board-header-item status_size">
        <span class="second">Status</span>
    </div>
    <div class="board-header-item person_size">
        <span class="second">People</span>
    </div>
    <div class="board-header-item date_size">
        <span class="second">Date</span>
    </div>
    <div class="board-header-item timeline_size">
        <span class="second">Timeline</span>
    </div>    
</div>

原理说明 #

• 开启swap: true后，Sortable会从实时排序模式切换为交换模式，拖拽过程中仅移动拖拽元素本身，其他元素位置保持不变，直到释放鼠标后才完成拖拽元素与目标位置元素的交换。
• 通过ghostClass隐藏默认的占位元素，避免拖拽时出现空白占位影响视觉效果；swapClass用于标记当前可交换的目标元素，给用户明确的交互反馈。

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