有没有办法在使用jquery ui时控制元素的排序

Question

我有一个可排序的div(#sortable),.draggable里面有elements().在那里,当我从下到上对元素进行排序时,可以通过向上拖动来轻松地对元素进行排序,而不必将元素拖到顶部.但是当从上到下排序元素时,我必须将元素拖到远低于想要的位置.有没有办法控制元素的排序,所以即使我向上/向下拖动一点点而不是一直向上/向下拖动它会显示占位符分别放置元素？

在codepen演示.

JS

  $('#content #sortable').sortable({
    handle: '.drag_handle',
    placeholder: "ui-state-highlight",
    axis: "y"
  });

  $('#blocks .draggable').draggable({
    helper: "clone",
    revert: "invalid",
    connectToSortable: '#content #sortable'
  });

更新

向上排序

向上排序很容易,因为我不必将元素一直拖到我想要排序的元素上方.

向下排序

向下排序很困难,因为我必须将元素一直拖到我想要排序的元素下面.

Answer 1

只需tolerance将可排序API的选项更改为"pointer".当光标位于占位符上时(当前需要),此选项将使draggable视为占位符,而不是等到超过50%的元素与占位符重叠.这就是为什么你必须向下滚动太远才能对它进行排序的原因.

$('#content #sortable').sortable({
    handle: '.drag_handle',
    placeholder: "ui-state-highlight",
    tolerance: "pointer"
});

这是更新的CodePen