jQuery可排序项目浮动右侧排序不流畅问题

Question

当项目向右浮动时，jQuery可排序拖动不流畅。我尝试修复它，但没有成功，也不明白为什么会出现这个问题。

要重现和理解此问题，您需要尝试拖动项目，您会发现有时候您想将项目放置在某个位置，但占位符停留在另一个位置。请参见附加的图像以更好地理解。

当移除float:right属性时，它将正常工作。

注意：这个问题有点难以理解，我在jsfiddle上复制了它，但你需要调整一下才能理解它。

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

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

- Roy Shoa

Answer 1

看起来，#sortable 内的右浮动会干扰 jquery-ui-sortable 的行为。

为了保持您的倒序（3,2,1）并将其对齐到右侧，并保持所需的功能按您描述的方式工作：

• 从 #sortable 中删除 float:right 并将其放置在父级 .example-box 中：现在父容器向右浮动，但不影响 #sortable

• 要获得反向的 3、2、1 顺序，只需要在 jQuery 代码中使用 get().reverse() 反向元素顺序即可。这样做后，顺序就不再影响 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％，这样在fiddle中看起来更好，但您也可以使用100％。

- Vickel

---

你的解决方案很好，但我遇到了一个问题，因为在我的情况下，我无法将UL向右浮动，因为我需要它的宽度为100％，在这种情况下，项目仍然在左侧（我尝试使用flex-box来移动它们，但拖动效果不好）。如果您可以直接从JavaScript中修复它作为补丁，那就太好了。 - Roy Shoa

当我将float right添加到UL标签时，出现了一个问题，Helper显示在光标左侧约100像素处，当我开始拖动时。我在jsfiddle上没有复制它，但在我的电脑上发生了这种情况，你能想到为什么吗？（我无法在评论中附加屏幕截图） - Roy Shoa

我已经更新了答案，添加了一个使用flexbox的示例。 - Vickel