jQueryUI Sortable - 如果包含和句柄设置，则无法将大元素拖动到顶部或底部答案

【问题标题】：jQueryUI Sortable - Unable to drag large elements to the top or bottom if containment and handle setjQueryUI Sortable - 如果包含和句柄设置，则无法将大元素拖动到顶部或底部
【发布时间】：2013-01-16 17:38:52
【问题描述】：

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

也可以有多个表的行可以重新排序，所以我使用包含属性来防止拖到其他区域以及在拖到所需区域之外时发生的其他问题。

问题是当我尝试将“高”行拖到订单的顶部或底部时，相比之下顶部和底部“短”。本质上，我不允许将高行拖到这些位置。我已经寻找了一个解决方案，但没有得到解决。任何帮助将不胜感激。

这里的工作示例：http://jsfiddle.net/jeffvoigt/XyPzf/

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

HTML：

<div class="container">
<table id="sortable">
  <tr class="odd">
    <td><p>[=]</p></td>
    <td>Single Line of Text</td>
  </tr>
  <tr class="even">
    <td><p>[=]</p></td>
    <td>Aenean porta, tellus quis auctor elementum, risus ante ornare augue, eu elementum nunc libero ut nisi. Pellentesque sed vestibulum tellus. Proin convallis enim eget felis iaculis viverra vestibulum lorem semper. Aliquam imperdiet viverra lorem, ut dignissim felis laoreet vel. Suspendisse fermentum neque eu est vestibulum bibendum. Maecenas dignissim egestas tempor. Ut tincidunt metus sed felis ornare nec sollicitudin risus gravida. Duis vitae mauris quis risus ultricies malesuada. Nulla facilisi. Phasellus fringilla, arcu eget congue sollicitudin, lorem elit ullamcorper ante, non fermentum orci mauris at tellus. Maecenas suscipit sodales molestie. Mauris luctus porta dui non volutpat.</td>
  </tr>
  <tr class="odd">
    <td><p>[=]</p></td>
    <td><img src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" /></td>
  </tr>
  <tr class="even">
    <td><p>[=]</p></td>
    <td>Single Line of Text</td>
  </tr>
</table>
</div>

Javascript：

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

【问题讨论】：

标签： jquery-ui jquery-ui-sortable

【解决方案1】：

我遇到了同样的问题。这是快速解决方案：

 $('.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);
    }
  }
});

【讨论】：

tolerance: pointer; 为我解决了这个问题。

【解决方案2】：

问题是你的句柄的位置决定了排序相对于它上面的句柄的 Y 位置。因此，为了演示，请转到 jsFiddle 并将 valign=top 添加到您的大文本区域。句柄移动到可排序元素的顶部，当您将其拖到短文本行的顶部时，它将卡入到位，但您无法将其排序到底部。但是，如果您将 fiddle 更新为 valign=bottom，您可以将其吸附到底部而不是顶部。

解决方案是将整个内容区域设置为可排序的句柄，或者将句柄移到内容的左侧（仅使其成为“可排序”区域）并仅拖动句柄（而不是内容），然后允许内容区域根据新排序进行更新。

基本上，它需要进行一些重新设想或设计才能正常运行。

【讨论】：

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

【解决方案3】：

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

只需添加一些间距（例如<div id="end-of-page-spacer" style="height: 500px;"></div>），我就可以将大行拖到位于列表底部的较小行下方。

【讨论】：