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

Question

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

演示在 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 选项更改为 "pointer"。当光标位于可拖动元素上方时（您现在需要的），此选项将使可拖动元素被视为位于占位符上，而不是等到超过 50% 的元素与占位符重叠。这就是为什么您必须向下滚动太远才能对其进行排序的原因。

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

这是更新后的 CodePen

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

Is there any way to control the sorting of elements when using jquery ui

javascript

sorting

jquery

jquery-ui

draggable