javascript - 使用jquery ui时有什么方法可以控制元素的排序

Question

我有一个可排序的 div (#sortable)，里面有元素 (.draggable)。在那里，当我从下到上对元素进行排序时，可以通过向上拖动轻松地对元素进行排序，而不必将太多内容拖到顶部。但是当从上到下对元素进行排序时，我必须将元素拖到远低于所需的位置。有什么方法可以控制元素的排序，这样即使我只向上/向下拖动一点点而不是一直向上/向下拖动，它也会显示占位符以分别放置元素？

演示在 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

只需更改 sortable API 的 tolerance 选项即可到 “指针”。当光标位于可拖动元素上方时(您现在需要的)，此选项将使可拖动元素被视为位于占位符上，而不是等到超过 50% 的元素与占位符重叠。这就是为什么您必须向下滚动太远才能对其进行排序的原因。

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

这是更新的 CodePen