jQuery UI 可排序行为不直观 - 难以上下移动

Question

如您在 this JSFiddle 中所见，您必须将项目向右拖动才能上下移动。

我希望用户能够直接上下移动项目，甚至左右移动项目。 显然，必须拖动到右边只是垂直重新排序。

箭头图标是 handle，您必须单击并拖动才能移动项目的部分。

HTML:

<body class="container">
  <div class="form-group">
    <label class="control-label col-md-2">Testeroo</label>
    <div class="col-md-10">
      <ul class="sortable fa-ul">
        <li>
          <i class="fa-li fas fa-arrows-alt-v fa-lg"></i>
          <input value="One" />
          <input value="Two" />
        </li>
        <li>
          <i class="fa-li fas fa-arrows-alt-v fa-lg"></i>
          <input value="One" />
          <input value="Two" />
        </li>
      </ul>
    </div>
  </div>
</body>

JS：

$(".sortable").sortable({ handle: "i.fa-li" });

使用来自 Font Awesome 的图标，这就是 fa* 类的图标。我也在用Bootstrap，如果有什么区别的话，也在Fiddle.

Answer 1

这是因为您的句柄 i.fa-li 不在 ul 的范围内。如果你在 ul 元素上放一个 background-color，你会看到手柄在外面，所以你的鼠标只有向右拖动才会进入可排序区域。

您需要调整您的 CSS 以便手柄位于 ul 区域以内启动，但它不会这样做。

为了演示，我将 fa-li 元素移回右侧，并用   填充其余 li 元素以解决它。这是一个 hack，但它表明它可以修复：

https://jsfiddle.net/2w0Lq3to/2/

这里有一个使用 CSS 和 .pad 元素的更好的修复方法：

https://jsfiddle.net/2w0Lq3to/3/

Answer 2

您可以使用 sortable's axis 选项启用排序，然后您就可以直接上下移动项目，甚至可以左右移动项目。

我已经修改了您的演示并创建了一个 NEW DEMO。

以下是添加 axis 选项的方法：

$(".sortable").sortable({ 
    handle: "i.fa-li",
    axis: "y"
});

jQuery UI 可排序行为不直观 - 难以上下移动

jQuery UI Sortable behaving unintuitively - difficult to move up and down

html

javascript

jquery

jquery-ui

jquery-ui-sortable