0

コード:

HTML

<div class="try" id="try1">1</div>
<div class="try" id="try2">2</div>
<div class="try" id="try3">3</div>

jQuery

var ImmagineDrag=$('#try3');
var ImmagineDrop=$('#try2');

var swap1 = ImmagineDrag.index();
var swap2 = ImmagineDrop.index();

ImmagineDrag.insertBefore($('.try').eq(swap2));
ImmagineDrop.insertBefore($('.try').eq(swap1));

divtry2が DOM から削除されるのはなぜですか?

4

3 に答える 3

2

アイテム2と3を交換したいだけの場合は、次のようにします。

$('#try3').insertBefore($('#try2'));

ここでもっと複雑になる理由はありません。アイテム1と3を交換したい場合は、

$('#try3').insertBefore($('#try1'));
$('#try1').insertAfter($('#try2'));

アイテムを好きな場所に置くだけです。

編集 ：

同じ要素の子である2つの要素を交換するこの関数を作成しました（一般化することはできますが、これにはさらにテストが必要です：最後の子、子のみなど）：

function swap($a, $b) { // a and b are (different) $jquery elements
    if ($b.index()<$a.index()) {
       var t = $a;
       $a = $b; $b = t;        
    }
    if ($b.index()==$a.index()+1) {
        $b.insertBefore($a);
    } else {
        var $c = $a.next();
        $a.insertBefore($b);
        $b.insertBefore($c);
    }
}

ここでテストできます：http：//jsfiddle.net/ferJR/

于 2012-09-14T13:04:34.200 に答える
0

ImmagineDrop.insertBefore($('.try').eq(swap1)); このとき、それ自体です$('.try').eq(swap1)。ImmagineDrop

と同じImmagineDrop.insertBefore(ImmagineDrop);です。

要素自体の前に要素を挿入すると、ドキュメントから切り離されます。

于 2012-09-14T13:11:46.617 に答える
0

理由は次のとおりです。

var ImmagineDrag=$('#try3');
var ImmagineDrop=$('#try2');

var swap1 = ImmagineDrag.index();
var swap2 = ImmagineDrop.index();
//at this point:
//  swap1 contains the value: 2
//  swap2 contains the value: 1

// $('.try').eq(swap2)  selects  $('#try2')
ImmagineDrag.insertBefore($('.try').eq(swap2));
// now $('#try3') has been inserted before '#try2'
// the order is now: try1, try3, try2

// the order of the nodes have changed :
//    swap1 is still 2,
//    so $('.try').eq(swap1) selects the third element
//    which is now '#try2'
// this action tries to insert '#try2' before itself !
ImmagineDrop.insertBefore($('.try').eq(swap1));
// hence your problem...

修正方法について：プレースホルダーを使用できます

function swap(node1, node2){ //2 nodes
     $placeHolder = $('<span>').insertBefore(node1);
     $(node1).insertBefore(node2);
     $(node2).insertBefore($placeHolder);
     $placeHolder.remove();
}

ただし、node1 == node2 の場合、または node1 が node2 の子孫である場合、このような関数は正しく機能しないことに注意してください。

于 2012-09-14T13:49:48.173 に答える