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>

Jquery的：

$(".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/

使用后取消prependTo

2 个答案: