Question

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

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

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

$(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时，似乎只是一个问题。例如。一个宽度为239像素的容器和宽度为25％的物品（239/4 = 59.75）。

浏览器处理上面的示例，但sortable似乎将固定宽度应用于占位符（或/和帮助程序），从而产生混乱。

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

干杯。

Answer 1

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

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

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

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

Demo

<强>参考

.sortable() - helper

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

1 个答案: