【问题标题】: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 你能帮我吗?
  • 不是我的头顶,但我会试着仔细看看。如果您尝试添加一些视觉效果,我相信这将有助于获得更多视图。我花了很长时间才追随你所追求的。

标签: javascript jquery jquery-ui sorting draggable


【解决方案1】:

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

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

这是更新后的CodePen

【讨论】:

  • 谢谢。这让我很生气。
  • 赏金可以在 7 小时后发放,之后会发放。再次感谢。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-07-05
  • 2011-11-27
  • 1970-01-01
  • 2014-05-30
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多