Jquery sortable 失败，因为它基于光标位置

Question

我正在尝试使用 jquery ui 创建一个可排序的列表：

$( "#sortable" ).sortable({
    axis: 'Y',
    containment: 'parent',
    handle: 'span'
});

 #sortable {
     list-style-type: none;
     margin: 0;
     padding: 0;
     width: 60%;
 }
 #sortable li {
     margin-bottom: 3px;
     padding: 0.4em;
     padding-left: 1.5em;
     font-size: 1.4em;
     height: 18px;
    position: relative;
 }
 #sortable li span {
     position: absolute;
     top: 0;
     margin-left: -1.3em;
 }

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<h3>Try dragging any item to the bottom. To drag an item grab arrow on it.</h3>

<ul id="sortable">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
</ul>

很遗憾，无法将任何项目拖到底部。

我相信 jquery 会等到持有可排序项目的光标至少在另一个项目的一半处才会切换它们的顺序。

有没有办法让这种项目交换仅在被拖动的项目在另一个项目上达到一定百分比时才发生，而不是基于光标位置？

Answer 1

$("#sortable").sortable({
    tolerance: 'pointer'
});