Question

我按顺序将四个DIV分别作为A，B，C和D，每个DIV都有一个向上/向下按钮。当点击它时，DIV应该替换位置。例如，如果点击B DIV中的订单，则订单应为B，A，C和D.

Answer 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>

<强> SCRIPT

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

Fiddle 和 Fiddle with some animation

Answer 2

尝试这样的事情，FIDDLE

CSS

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

HTML CODE

<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>

JAVASCRIPT

 $(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);
                }
        })
    })

Answer 3

上传/下调完整代码，上下按钮或现场演示（jsFiddle）

html代码：

<div class="section a">
    <a class="up">UP</a>
    <a class="down">Down</a>  
</div>
<div class="section b">
    <a class="up">UP</a>
    <a class="down">Down</a>  
</div>
<div class="section c">
    <a class="up">UP</a>
    <a class="down">Down</a>  
</div>
<div class="section d">
    <a class="up">UP</a>
    <a class="down">Down</a>  
</div>

css代码：

.section{width:500px; color:#fff; font-family:arial; margin-bottom:10px; text-align:center; font-size:30px;}
.a{background-color:#09F; height:50px; line-height:50px;}
.b{background-color:#333; height:100px; line-height:100px;}
.c{background-color:#9C3; height:150px; line-height:150px;}
.d{background-color:#F93; height:200px; line-height:200px;}

a{display:inline-block; margin: 0 10px; text-decoration:underline; cursor:pointer;}
a:hover{text-decoration:none;}

jQuery代码：

jQuery(document).ready(function($){

  $(".section a").click(function(e){
       var eSection = $(this).parent('.section');
      if($(e.target).is('.up') && eSection.prev('.section').length) {
          eSection.prev('.section').insertAfter(eSection);
      }

      if($(e.target).is('.down') && eSection.next('.section').length) {
          eSection.next('.section').insertBefore(eSection);
      }

  });

});

单击时旋转四个div

3 个答案:

html代码：

css代码：

jQuery代码：