带有百分比混乱的jquery可排序浮动元素答案

【问题标题】：jquery sortable floated elements with percent chaos带有百分比混乱的jquery可排序浮动元素
【发布时间】：2015-03-17 10:55:40
【问题描述】：

在对基于百分比宽度的浮动元素应用 sortable 后，拖动行的最后一项“有时”会导致元素跳转到下一行

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

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

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>

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

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

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

干杯。

【问题讨论】：

标签： jquery position jquery-ui-sortable

【解决方案1】：

您可以指定助手，在排序时拖动：

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

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

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

Demo

参考

.sortable() - helper

【讨论】：