jquery - 使用后取消 prependTo

Question

我正在尝试将 div 移动到左侧的 div，然后将其返回到右侧的 div。

我已经让它工作了，我可以在左边的 div 上显示选定的 div。

HTML：

<div id="left">

</div>

<div id="right">
    <div class="block">
        Item 1
    </div>
    <div class="block">
        Item 2
    </div>
    <div class="block">
        Item 3
    </div>
    <div class="block">
        Item 4
    </div>
</div>

查询：

$(".block").click(function() {
    if ($(this).height() < 100) {
        $(this).animate({height:"100px",width:"100px"},500);
        $(this).prependTo("#left");
    }
    else {
        $(this).animate({height:"50px",width:"50px"},500);
    }
});

（另见 Jsfiddle：http: //jsfiddle.net/MMTu7/）

我可以使用 prependTo- 或 appendTo- 方法将 div 再次返回到正确的 div，但是顺序会错误......

是否有某种历史方法或类似的东西，所以我可以在单击 div 之前将顺序更改回？

Answer 1

http://jsfiddle.net/MMTu7/1/

$('.block').each(function( i ){
    $(this).addClass('idx'+i);
});

$("#left, #right").on('click', '.block', function() {

    var myIdx = $(this).attr('class').split(" ")[1];
    //alert(myIdx)
    if ($(this).height() < 100) {
        $(this).clone().prependTo('#left').animate({height:100, width:100},500);
        $(this).hide();
    }
    else {
        $(this).animate({height:50, width:50},500, function(){
            $("#right ."+myIdx).show();
            $(this).remove();           
        });
    }

});

Answer 2

尝试使用它。

$('.block').click(function() {
    if ($(this).height() < 100) {
        $(this).animate({height:'100px',width:'100px'},500);
        $(this).prependTo('#left');
    }
    else {
        $(this).prependTo('#left');
        $(this).animate({height:'50px',width:'50px'},500);
    }
});

您的 div 将被重新排序。

http://jsfiddle.net/SanketS/MMTu7/2/