基于jQuery+Bootstrap实现可自由拖拽排序的流式卡片布局

要实现保持Bootstrap col尺寸不变、不同高度卡片自由拖拽到有空间位置的效果，不能用jQuery UI Sortable的行内排序逻辑，需要结合**瀑布流布局引擎（Masonry）和轻量拖拽库（Sortable.js）**来实现，两者配合可以突破行限制，自动填充网格空隙。

核心思路 #

1. 保留Bootstrap的col-*类维持卡片尺寸，用Masonry处理不规则网格的自动布局
2. 用Sortable.js实现拖拽交互，拖拽结束后触发Masonry重新计算布局，确保卡片位置正确

完整实现代码 #

1. 引入依赖库 #

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Masonry.js -->
<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script>
<!-- Sortable.js -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>

2. HTML结构 #

保留Bootstrap的row和col-*结构，外层容器添加masonry-container类用于布局控制：

<div class="container mt-4">
  <div class="row masonry-container">
    <!-- Col-6 高卡片 -->
    <div class="col-6 mb-4">
      <div class="card h-100" style="height: 300px;">
        <div class="card-body">
          <h5 class="card-title">Col-6 高卡片</h5>
        </div>
      </div>
    </div>
    <!-- Col-3 短卡片1 -->
    <div class="col-3 mb-4">
      <div class="card h-100" style="height: 150px;">
        <div class="card-body">
          <h5 class="card-title">Col-3 短卡片1</h5>
        </div>
      </div>
    </div>
    <!-- Col-3 短卡片2 -->
    <div class="col-3 mb-4">
      <div class="card h-100" style="height: 150px;">
        <div class="card-body">
          <h5 class="card-title">Col-3 短卡片2</h5>
        </div>
      </div>
    </div>
    <!-- Col-4 卡片 -->
    <div class="col-4 mb-4">
      <div class="card h-100" style="height: 200px;">
        <div class="card-body">
          <h5 class="card-title">Col-4 卡片</h5>
        </div>
      </div>
    </div>
    <!-- Col-8 卡片 -->
    <div class="col-8 mb-4">
      <div class="card h-100" style="height: 250px;">
        <div class="card-body">
          <h5 class="card-title">Col-8 卡片</h5>
        </div>
      </div>
    </div>
  </div>
</div>

3. CSS样式 #

给Masonry容器和卡片设置基础定位样式：

.masonry-container {
  position: relative;
}
/* 让Masonry控制卡片定位 */
.masonry-container > [class^="col-"] {
  position: absolute;
}
/* 拖拽时的占位样式 */
.sortable-ghost {
  opacity: 0.4;
  background-color: #eee;
}

4. JavaScript逻辑 #

初始化Masonry布局和Sortable拖拽，拖拽结束后触发重排：

// 初始化Masonry，适配Bootstrap网格
const masonry = new Masonry('.masonry-container', {
  itemSelector: '[class^="col-"]',
  columnWidth: '.col-1', // 以Bootstrap的col-1为基准列宽
  gutter: 16 // 对应Bootstrap的gutter间距，可根据需求调整
});

// 初始化Sortable拖拽
Sortable.create(document.querySelector('.masonry-container'), {
  animation: 150, // 拖拽动画时长
  ghostClass: 'sortable-ghost', // 拖拽占位类
  onEnd: function() {
    // 拖拽完成后重新计算布局
    masonry.reloadItems();
    masonry.layout();
  }
});

关键说明 #

• 尺寸保留：完全沿用Bootstrap的col-*类，Masonry会自动识别卡片宽度，不会改变原有尺寸
• 空隙填充：Masonry会根据卡片高度自动填充网格空隙，实现类似瀑布流的布局效果
• 拖拽同步：Sortable负责拖拽交互，onEnd事件触发Masonry重排，解决拖拽后卡片位置错乱问题

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