jQuery Sortable Items浮动右排序不顺利问题

Question

当项目向右浮动时，jQuery Sortable拖动无法顺利进行。我试图修复它没有成功，而且我不明白为什么这是一个问题。

要重现和理解该问题，您需要尝试拖动这些项目，您会发现有时您希望将某个项目放置在某个地方，而占位符却在另一个地方。请参阅所附图片以更好地了解。

在删除float:right属性时，它将很好地工作。

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

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

我很乐意得到一些答案。

Answer 1

sudo chown -R "$USER" "$(brew --prefix)/Cellar" 内的浮标似乎弄乱了#sortable的行为。

保持相反的顺序（3,2,1）并使其向右对齐，并保持所需的功能如您所述：

• 从jquery-ui-sortable中取出float:right并将其放在 父级#sortable：现在，父级的容器浮动到 正确，但不会影响.example-box

• 要反转3、2、1的顺序，只需反转
  元素在您的jQuery代码中使用get().reverse()进行排序。这样做现在不下订单 由于不再使用#sortable，因此不再影响jquery-ui-sortable

html：

float:right

css：

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

jQuery：

.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;
}

这是一个有效的jsfiddle：https://jsfiddle.net/n7b9wezj/3/

注意：我已经设置了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()); }); ，因为它显示的功能更好，但是您不需要设置它。蓝色边框仅用于说明div的位置。

编辑以反映评论 这是使用flexbox的另一个示例：https://jsfiddle.net/y9qd08bn/1/ 我将宽度设置为90％，因此在小提琴中看起来更好，但是您可以将其与100％一起使用。