使用jquery ui时有啥方法可以控制元素的排序

Posted 2023-05-08

【中文标题】使用jquery ui时有啥方法可以控制元素的排序

【英文标题】：Is there any way to control the sorting of elements when using jquery ui使用jquery ui时有什么方法可以控制元素的排序

【发布时间】：2015-12-31 14:13:59

【问题描述】：

我有一个可排序的 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'
  );

更新

向上排序

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

向下排序

向下排序很困难，因为我必须将元素一直拖到要排序的元素下方。

【问题讨论】：

我无法理解这个问题。你能提供一个草图或一些额外的解释吗？

@polarblau 请查看此codepen 演示。当我向上拖动/排序元素时，我不必一直拖动到向上元素的末尾，但是当我向下拖动时，我必须一直向下拖动到元素下方。我想要的是当我拖动/排序元素时说 5px 下面然后为该元素留下一个占位符，这样我就不必一直拖到下面的元素。

好吧，我想我明白了。谢谢！

@polarblau 你能帮我吗？

不是我的头顶，但我会试着仔细看看。如果您尝试添加一些视觉效果，我相信这将有助于获得更多视图。我花了很长时间才追随你所追求的。

【参考方案1】：

只需将sortable API 的tolerance 选项更改为"pointer"。当光标在它上面（你现在需要的）时，这个选项将使可拖动元素被认为是在占位符上，而不是等到超过 50% 的元素与占位符重叠。这就是为什么您必须向下滚动太远才能对其进行排序的原因。

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

这是更新后的CodePen

【讨论】：

谢谢。这让我很生气。

赏金可以在 7 小时后发放，之后会发放。再次感谢。