Jquery sortable fails because it's based on cursor position

Question

I am trying to create a sortable list with 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>

Unfortunately, it is not possible to drag any item to the bottom.

I believe jquery waits until the cursor that's holding the sortable item is at least half way across another item before it switches their order.

Is there a way to make this exchange of items happen only when the item being dragged is a certain percentage across another item, rather than basing it off of the cursor position?

Answer 1

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