JQuery UI Sortable结合Bootstrap列：右侧拖放致下方行下移问题

我看了你的拖拽测试脚本问题，当把Div拖到右侧边缘的Div上方时所有元素下移，这个问题本质是jQuery UI Sortable的占位符样式和Bootstrap 3的栅格布局逻辑冲突导致的。具体来说，Bootstrap的col-*类依赖浮动（float: left）和固定的padding/margin来维持栅格排列，而Sortable默认的占位符没有匹配这些样式，拖拽时占位符的尺寸或位置异常，触发了整个容器的布局重排，让所有元素下移。

具体修复步骤： #

1. 自定义Sortable占位符的CSS样式
   给占位符设置和目标元素一致的高度、padding和浮动属性，避免占位符尺寸不对撑开布局：

   .ui-sortable-placeholder {
       height: auto !important;
       float: left;
       padding: 15px;
       visibility: visible !important;
       background-color: rgba(0,0,0,0.1);
   }
   

   这里visibility: visible是为了能看到占位符的位置，方便调试，也可以根据需求调整背景色。

2. 调整Sortable的初始化配置
   在初始化Sortable时，添加forcePlaceholderSize: true和containment配置，强制占位符匹配被拖拽元素的尺寸，同时限制拖拽范围在容器内，避免拖到边缘触发意外布局：

   $(function() {
       $(".row").sortable({
           connectWith: ".row",
           forcePlaceholderSize: true, // 强制占位符尺寸匹配元素
           containment: ".container", // 限制拖拽在容器内
           placeholder: "ui-sortable-placeholder",
           revert: true
       }).disableSelection();
   });
   

3. 修复Bootstrap栅格的浮动清除问题
   给包含拖拽元素的.row容器添加清除浮动的样式，避免拖拽时浮动元素错位：

   .row {
       overflow: hidden;
       min-height: 1px;
   }
   

为什么这样修复？ #

• forcePlaceholderSize: true会让Sortable自动计算被拖拽元素的尺寸，赋值给占位符，这样占位符不会因为高度为0或者尺寸异常导致布局错乱。
• 自定义占位符的浮动和padding，让它完全匹配Bootstrap列的布局规则，不会打破栅格的排列逻辑。
• containment限制拖拽范围，避免元素被拖到容器外触发浏览器的自动布局调整。

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