使用 jQueryUI 可排序和可拖动导致可排序元素的容器内联块元素跳转答案

【问题标题】：Using jQueryUI sortable and draggable causes container inline-block elements for sortable element to jump使用 jQueryUI 可排序和可拖动导致可排序元素的容器内联块元素跳转
【发布时间】：2013-09-07 13:02:19
【问题描述】：

stackoverflow 上的相关问题0 和1。 JSFiddle：http://jsfiddle.net/ashugupt/hpncs/1/

还尝试了如下排序：

$(".fields").sortable({
        connectedWith: ".fields",
        revert: true,
    });

附：您需要向绿色 div 的底部（在红色和绿色之间）拖动，如快照

【问题讨论】：

我做了一些改动。看看这个解决方案是否适合你。 jsfiddle.net/hpncs/3
@MandeepJain the float:left 而不是 display:inline-block 为我解决了这个问题。我需要做的唯一补充是制作 $(#sortable).css({overflow: hidden}) [当然，css文件中的等价物]。把那个小提琴变化作为答案，我会把它标记为正确答案。再次感谢。

标签： jquery css jquery-ui jquery-ui-sortable jquery-ui-draggable

【解决方案1】：

如 cmets 中所述，此 solution 适合您。

我基本上从

改变了你的结构

display: inline-block;

到

float: left;

【讨论】：

我很高兴找到了这个解决方案，尽管我现在已经把头发都拔光了。

【解决方案2】：

向 .ui-sortable-placeholder 添加负边距底部对我有用。金额可能与您的行高有关，因此您可能需要玩数字

.ui-sortable-placeholder {
    margin-bottom:-15px
}

【讨论】：