jQuery可排序项浮点右排序不顺畅问题

Question

当项目向右浮动时，jQuery可排序拖动工作不顺畅。我尝试修复它没有成功，我不明白为什么这是一个问题。

要重现并理解该问题，您需要尝试拖动项目，您会看到有时您想要将项目放在某个地方并且占位符停留在另一个地方。看附图可以更好地理解。

删除float:right属性时，它会很好用。

注意：它有点难以理解这个问题，我在jsfiddle上重现它但你需要用它来理解它

https://jsfiddle.net/royshoa/4Lprn9bs/72

我很乐意为此得到一些答案。

Answer 1

看起来像#sortable内部的浮动正在弄乱jquery-ui-sortable的行为。

保持相反的顺序（3,2,1）并将其对齐并保持所需的功能正如您所描述的那样：

• 从float:right取出#sortable并将它放在父母.example-box：现在父母的容器漂浮到右边，但它不影响#sortable
• 得到反向的3,2,1顺序，你只需要反转 使用get().reverse()在jQuery代码中排序元素。这样做的顺序现在不再影响jquery-ui-sortable，因为没有使用更多的float:right

HTML：

<div class="example-box">
  <ul id="sortable">
    <li class="ui-state-default">1</li>
    <li class="ui-state-default">2</li>
    <li class="ui-state-default">3</li>
  </ul>
</div>

CSS：

.example-box {
  margin: 50px;
  border: 1px solid navy;
  float: right;
}

#sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#sortable li {
  margin: 3px 3px 3px 0;
  padding: 1px;
  width: 120px;
  height: 120px;
  font-size: 4em;
  text-align: center;
  float: left;
}

#sortable li {}

.draggable-placeholder {
  border: 2px dashed #D9D9D9 !important;
  background-color: #F7F7F7 !important;
}

jQuery的：

jQuery(function($) {

  $('#sortable').sortable({
    opacity: 0.8,
    revert: true,
    forceHelperSize: true,
    forcePlaceholderSize: true,
    placeholder: 'draggable-placeholder',
    tolerance: 'pointer',
    axis: 'x'
  });

  var list = $('ul#sortable');
  var listItems = list.children('#sortable>li');
  list.append(listItems.get().reverse());

});

这是一个工作的jsfiddle：https://jsfiddle.net/n7b9wezj/3/

注意：我设置了axis:x，因为它显示的功能更好，但您不需要设置它。蓝色边框只是为了说明div的位置......

编辑以反映评论这里是使用flexbox的另一个例子：https://jsfiddle.net/y9qd08bn/1/我已经将宽度设置为90％，所以它在小提琴中看起来更好，但你可以100％使用它。