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

Question

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

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

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

这里的工作示例: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"
});

Answer 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);
    }
  }
});

Answer 2

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

解决方案可能是使整个内容区域成为可排序的句柄，或者可能将句柄移到内容的左侧(使其仅为"可排序"区域)并仅拖动句柄(而不是内容)，然后允许内容区域在新的排序时更新。

基本上，它需要被重新设想或设计以正常运行。

Answer 3

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

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