Jquery ui jQueryUI可排序-如果设置了包含和句柄，则无法将大型元素拖动到顶部或底部

对于我试图解决的问题，我有一个表，每行都有唯一的内容。允许通过句柄对行重新排序，并且每行的内容并不总是具有统一的高度。有时一行中会出现大量文本和/或图像

也可以有多个表，其中的行可以重新排序，因此我使用containment属性来防止拖动到其他区域以及在拖动到所需区域之外时出现的其他问题

问题是当我试图将一个“高”行拖动到订单的顶部或底部时，通过比较，顶部和底部是“短”的。基本上，我不允许将高行拖动到这些位置。我已经找到了一个解决办法，但没有找到。任何帮助都将不胜感激

此处的工作示例：

中间的两行都不能拖到列表的顶部或底部

HTML:

---

问题是句柄的位置决定了排序相对于其顶部句柄的Y位置。因此，为了演示，请转到JSFIDLE并在大文本区域中添加一个valign=top。控制柄移动到可排序元素的顶部，当您将其拖动到文本短行所在的顶部时，它将捕捉到位，但无法将其排序到底部。但是，如果将小提琴更新为valign=bottom，则可以将其捕捉到底部，但不能捕捉到顶部

解决方案是将整个内容区域设置为可排序句柄，或者将句柄向外移到内容的左侧（仅设置为“可排序”区域），并仅拖动句柄（而不是内容），然后允许内容区域的句柄在新排序时更新

---

基本上，它需要重新设想或设计，才能正常工作。

我也面临同样的问题。这是一个快速解决方案：

 $('.collections').sortable({
  handle: 'h3',
  axis: 'y',
  containment: 'parent',
  items: '.collection',
  cursor: 'move',
  tolerance: 'pointer',
  scroll: true,
  beforeStop: function(event, ui) {
    var lastElemTop = $('.collections .collection:last-child').position().top;
    var currElemTop = ui.position.top;
    var currElemHeight = ui.item.height();
    if (currElemTop + currElemHeight * 2 > lastElemTop) {
      $('.collections .collection:last-child').insertBefore(ui.item);
    }
  }
});

---

我遇到了同样的问题。似乎只有在jQuery可排序列表下没有内容或间距时才会发生这种情况

---

只需添加一些间距（例如，

）就可以将大行拖到列表底部较小行的下方。

即使将整个单元格变成一个句柄，也需要抓住单元格顶部或底部的行，才能使其正常工作。这相当不直观，感觉像是疏忽。是的，我同意。我看到的所有例子都是等间距处理程序tho。这是一个疏忽。

$( "#sortable tbody" ).sortable({
  axis: "y",
  containment: ".container",
  cursor: "move",
  handle: "p"
});

 $('.collections').sortable({
  handle: 'h3',
  axis: 'y',
  containment: 'parent',
  items: '.collection',
  cursor: 'move',
  tolerance: 'pointer',
  scroll: true,
  beforeStop: function(event, ui) {
    var lastElemTop = $('.collections .collection:last-child').position().top;
    var currElemTop = ui.position.top;
    var currElemHeight = ui.item.height();
    if (currElemTop + currElemHeight * 2 > lastElemTop) {
      $('.collections .collection:last-child').insertBefore(ui.item);
    }
  }
});