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

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

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

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

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