Jquery sortable失败,因为它基于游标位置

时间:2014-11-30 22:23:45

标签: jquery jquery-ui jquery-ui-sortable jquery-ui-draggable

我正在尝试使用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>
&#13;
&#13;
&#13;

不幸的是,无法将任何项目拖到底部。

我相信jquery等待,直到持有可排序项目的光标在切换订单之前至少在另一个项目的一半处。

有没有办法让这个项目交换只在被拖动的项目是另一个项目的某个百分比时发生,而不是基于光标位置?

1 个答案:

答案 0 :(得分:0)

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