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，如果它有任何区别，这也是在小提琴。

Answer 1

这是因为您的句柄i.fa-li没有驻留在ul的边界内。如果在background-color元素上放置ul，您将看到句柄在外面，因此在向右拖动之前鼠标不会进入可排序区域。

您需要调整CSS以使句柄位于ul区域内以启动，并且不会执行此操作。

为了进行演示，我将fa-li元素移回了右侧，并填充其余的li元素以使用 对其进行说明。这是一个黑客，但它表明它可以修复：

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 Sortable行为不直观 - 难以上下移动

2 个答案: