使用jQueryUI .sortable()与CSS多列布局时，列表项部分移入下一列

嘿，这个问题我之前也踩过坑！核心原因应该是你用了CSS的column-count/column-width这类流式列布局——它是按内容流来拆分的，会把单个<li>的内容切割到下一列，而不是把整个列表项作为完整单元来排列。

给你两个靠谱的解决方案，优先推荐第一个：

方案1：用Flexbox实现整列排列（最稳定） #

改用Flexbox的垂直排列+换行特性，让每个<li>作为完整块级元素填满列，不会被拆分。

HTML结构

<div id="testing">
  <ul class="sortable-list">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    <li>列表项5</li>
    <li>列表项6</li>
    <!-- 更多列表项 -->
  </ul>
</div>

CSS样式

#testing {
  height: 300px; /* 你设置的特定高度 */
  overflow: hidden; /* 防止容器外溢出 */
}

.sortable-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column; /* 垂直方向排列 */
  flex-wrap: wrap; /* 不够高度时换行到下一列 */
  height: 100%; /* 继承容器高度 */
}

.sortable-list li {
  width: 200px; /* 每列宽度 */
  margin: 5px;
  padding: 10px;
  background: #f0f0f0;
  border: 1px solid #ccc;
  min-height: 50px; /* 固定最小高度，避免动态高度打乱布局 */
  box-sizing: border-box;
}

/* 适配Sortable的占位符，必须和li尺寸一致 */
.sortable-list .ui-sortable-placeholder {
  visibility: visible !important;
  background: #e0e0e0;
  border: 1px dashed #999;
  min-height: 50px;
  width: 200px;
  margin: 5px;
  box-sizing: border-box;
}

jQuery Sortable配置

$(function() {
  $(".sortable-list").sortable({
    placeholder: "ui-sortable-placeholder",
    helper: "clone", // 用克隆元素做拖拽助手，避免原元素变形
    revert: 100,
    start: function(event, ui) {
      // 拖拽时强制保持flex-wrap，防止布局错乱
      $(this).css('flex-wrap', 'wrap');
    },
    stop: function(event, ui) {
      // 拖拽结束后重新触发布局，确保列表项正确排列
      $(this).css('flex-wrap', 'wrap');
    }
  }).disableSelection();
});

方案2：修复Column布局的元素拆分（兼容旧场景） #

如果你一定要用Column布局，可以给每个<li>添加break-inside: avoid属性，强制浏览器不拆分单个列表项：

.sortable-list li {
  break-inside: avoid;
  /* 你的其他样式 */
}

不过要注意：这种方案下jQuery Sortable的拖拽位置计算可能会出问题，因为Column布局的元素偏移量逻辑和普通布局不同，稳定性不如Flexbox方案。

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