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

Question

将可排序应用于宽度基于百分比的浮点元素后，拖动行的最后一项"有时"会导致元素跳转到下一行

仅当容器处于特定宽度时，才会看到此行为...因此具有随机性（主要在将可排序应用于响应式元素（如引导样式列）时看到）

有关一个简单的示例，请参阅下面的链接...拖动橙色框将突出显示问题：

JSFiddle

$(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>

仅当容器宽度除以列具有 .75 余数时，这似乎才是一个问题。 例如，宽度为 239px 的容器和宽度为 25% 的项目 （239/4 = 59.75）。

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

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

干杯。

Answer 1

您可以指定为帮助程序，该辅助程序在排序时拖动：

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

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

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

演示

参考

.sortable（） - 助手