-2

A、B、C、D の 4 つの DIV が順番にあり、各 DIV には上下ボタンがあります。それがクリックされているとき、DIVは位置を置き換える必要があります。たとえば、B DIV の上がクリックされている場合、順序は B、A、C、D である必要があります。

4

3 に答える 3

1

私の仮定はあなたを助けるかもしれません、

HTML

<div id="container">
    <div id="a" class="cont"> A </div>
    <div id="b" class="cont"> B </div>
    <div id="c" class="cont"> C </div>
    <div id="c" class="cont"> D </div>  
</div>

脚本

$(function(){
    $(document).on('click','.cont',function(){
        $clone=$(this).clone();
        $(this).remove();
        $('#container').prepend($clone);
    });
});

いくつかのアニメーションを使用したフィドルと

于 2013-10-10T07:27:04.890 に答える
0

このようなものを試してみてください、フィドル

CSS

    .myDiv{
        clear: both;
        border: 1px solid #000;
        height: 100px;
        width: 100px;
        margin-bottom: 5px;
        margin-left: 20px;
    }

HTML コード

<body>
    <div class="myDiv">
        A
        <button type="button" class="up">UP</button>
        <button type="button" class="down">DOWN</button>
    </div>
    <div class="myDiv">
        B
        <button type="button" class="up">UP</button>
        <button type="button" class="down">DOWN</button>
    </div>
    <div class="myDiv">
        C
        <button type="button" class="up">UP</button>
        <button type="button" class="down">DOWN</button>
    </div>
    <div class="myDiv">
        D
        <button type="button" class="up">UP</button>
        <button type="button" class="down">DOWN</button>
    </div>
</body>

ジャバスクリプト

 $(function(){
        $('.up').click(function(){
            var div = $(this).parent();
            if(div.prev().length){
                $(div.prev() ).before(div);
            }
        })
        $('.down').click(function(){
                var div = $(this).parent();
                if(div.next().length){
                    $(div.next()).after(div);
                }
        })
    })
于 2013-10-10T07:27:12.470 に答える