正如您在 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 中。
最佳答案
这是由于您的句柄 i.fa-li 不在 ul 的边界内造成的。如果您在 ul 元素上放置 background-color，您将看到 handle 位于外部，因此您的鼠标不会进入可排序区域，直到您拖动到对。
您需要调整 CSS，使句柄位于 ul 区域内才能启动，但它不会执行此操作。
为了演示，我将 fa-li 元素移回到右侧，并填充了其余的 li 元素以使用 来解释它;。这是一个 hack，但它表明它可以被修复:
https://jsfiddle.net/2w0Lq3to/2/
这里有一个使用 CSS 和 .pad 元素的更好修复方法:
关于javascript - jQuery UI 可排序行为不直观 - 难以上下移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47933871/