正如您在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的边界内。如果你在background-color元素上放置一个ul，你会看到手柄在外面，所以你的鼠标在你向右拖动之前不会进入可排序区域。
你需要调整你的CSS，以便手柄在ul区域内启动，它不会这样做。
为了演示，我将fa-li元素移动到右边，并用li填充其余的 元素来解释它。这是一个黑客，但它表明它可以修复：
https://jsfiddle.net/2w0Lq3to/2/
这是使用CSS和.pad元素的更好的修复：