5

私が解決しようとしている問題については、各行に固有のコンテンツを持つテーブルがあります。行はハンドルを介して並べ替えることができ、各行のコンテンツは常に均一な高さではありません。場合によっては、行内に大量のテキストや画像が表示されることがあります。

並べ替え可能な行を持つテーブルが複数ある場合もあるため、containment プロパティを使用して、他のゾーンへのドラッグや、目的の領域の外にドラッグしたときに発生するその他の問題を防止しています。

問題は、比較すると上下が「短い」場合に、「高い」行を注文の上部または下部にドラッグしようとしたときです。基本的に、背の高い行をこれらの位置にドラッグすることはできません。私は解決策を探しましたが、不足しています。どんな助けでも大歓迎です。

ここでの実例: http://jsfiddle.net/jeffvoigt/XyPzf/

中央の 2 つの行はどちらも、リストの一番上または一番下にドラッグできません。

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"
});
4

3 に答える 3

1

問題は、ハンドルの配置によって、その上にあるハンドルに対する並べ替えの Y 位置が決定されることです。デモを行うには、jsFiddle に移動し、大きなテキスト領域に valign=top を追加します。ハンドルは並べ替え可能な要素の上部に移動し、テキストの短い行がある上部にドラッグすると所定の位置にスナップされますが、下部に並べ替えることはできません。ただし、フィドルを valign=bottom に更新すると、上部ではなく下部にスナップできます。

解決策は、コンテンツ領域全体を並べ替え可能なハンドルにするか、ハンドルをコンテンツの左側に移動して (「並べ替え可能な」領域のみにする)、ハンドルのみを (コンテンツではなく) ドラッグしてから、新しい並べ替えで更新するコンテンツ領域。

基本的に、適切に機能するように再構想または設計する必要があります。

于 2013-01-16T18:21:28.017 に答える
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);
    }
  }
});
于 2015-07-14T12:24:36.740 に答える
0

これとまったく同じ問題が発生しました。これは、jQuery Sortable リストの下にコンテンツやスペースがない場合にのみ発生するようです。

スペースを追加するだけで (例: <div id="end-of-page-spacer" style="height: 500px;"></div>)、大きな行をリストの下部にある小さな行の下にドラッグできました。

于 2015-12-07T20:23:45.193 に答える