3

次のようなテーブルがあります。

<table id="sortable">
  <tr id="d1" class="mainrow"><td class="handle">O</td><td>Item 1</td></tr>
  <tr id="d1b"><td>&nbsp;</td><td>blah</td></tr>
  <tr id="d2" class="mainrow"><td class="handle">O</td><td>Item 2</td></tr>
  <tr id="d2b"><td>&nbsp;</td><td>blah</td></tr>
  <tr id="d3" class="mainrow"><td class="handle">O</td><td>Item 3</td></tr>
  <tr id="d3b"><td>&nbsp;</td><td>blah</td></tr>
  <tr id="d4" class="mainrow"><td class="handle">O</td><td>Item 4</td></tr>
  <tr id="d4b"><td>&nbsp;</td><td>blah</td></tr>
</table>

および次の JavaScript を使用して、並べ替え可能なプロパティを設定します。

$( "#sortable tbody" ).sortable({
  stop: hasChanged,
  handle: '.handle',
  cursor: 'move',
  items: ".mainrow"
});

奇数行を移動するときに、奇数行と偶数行を一緒に保持したい (偶数行にはハンドルがないため、ピックアップできません)。

私の hasChanged 関数は、ドロップが発生した後に偶数行を移動しますが、ドラッグ中に視覚効果が正しく見えません。ギャップは奇数行の下に表示され、hasChanged 関数が終了した後にそれが終了する場所であるため、偶数行の下に表示したいと思います。

誰でもこれを行う方法を知っていますか?

4

1 に答える 1

1

気にしないでください、それを理解しました：

$( "#sortable tbody" ).sortable({
  stop: hasChanged,
  over: movePlaceholder,
  handle: '.handle',
  cursor: 'move'
});

movePlaceholder 関数内でプレースホルダーの位置を変更するだけです。

function movePlaceholder(e, ui)
{
  if (ui.placeholder.prev().attr("id").length == 2)
    ui.placeholder.insertAfter(ui.placeholder.next());
}

要求に応じて、hasChanged 関数:

function hasChanged(e, ui)
{
    var newPosition = ui.item.index();
    var id = ui.item.attr("id");

    // whatever you need to do goes here
}
于 2013-07-05T09:09:35.170 に答える