jquery 百分比混乱的可排序浮动元素

Question

将 sortable 应用于基于百分比宽度的浮动元素后，拖动行的最后一项可以"sometimes"导致元素跳转到下一行

此行为仅在容器处于特定宽度时才会出现...因此具有随机性（主要在将可排序应用于 bootstrap 样式列等响应式元素时出现）

请参阅下面的 link 以获取简单示例...拖动橙色框将突出显示问题：

$(function() {
    $("#sortable").sortable();
});

#sortable{
    width:239px;
}
#sortable div {
    float:left;
    width:25%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

<div id="sortable">
  <div style="background-color:red">1</div>
  <div style="background-color:blue">2</div>
  <div style="background-color:green">3</div>
  <div style="background-color:orange">4</div>
</div>

只有当容器宽度除以列的余数为 0.75 时，这似乎才是问题。例如。宽度为 239px 的容器和宽度为 25% (239/4 = 59.75) 的项目。

浏览器处理上述示例，但 sortable 似乎将固定宽度应用于占位符（or/and 帮助程序），因此随之而来的是混乱。

我已经用 JQuery UI 提交了一个关于这个的错误...但是如果目前有人有任何好的解决方法，我将不胜感激。

干杯。

Answer 1

可以指定为helper，排序时拖动：

 $("#sortable").sortable({
     helper: 'clone'
 });

所以现在原来的div会被克隆出来拖拽，所以jQuery不需要创建一个新的元素，这显然是错误的。

遗憾的是，我不知道是否还有其他副作用或边缘情况，但它适用于您提供的示例。

Demo

参考

.sortable() - helper

jquery 百分比混乱的可排序浮动元素

jquery sortable floated elements with percent chaos

jquery

position

jquery-ui-sortable