Question

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

也可以有多个表可以重新排序，因此我使用了包含属性来阻止拖入其他区域以及在所需区域外拖动时出现的其他问题。

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

这里的工作示例：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，则可以将其捕捉到底部而不是顶部。

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

基本上，需要重新设想或设计如何正常运作。

Answer 2

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

 $('.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 3

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

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

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

3 个答案: