Question

我有5个div垂直向下翻页。

我希望能够点击任何一个，并让它成为订单中的第一个div，＆＃34; list＆＃34;在某种方式。在一个完美的世界中，其他人会暗淡/减少不透明度，点击的人会滑动/动画到顶部，而其他人撞到。但是，这可能会在以后发生。我已经看到使用CSS完成div重新排序，但这并不是在页面上持续动态。

我尝试将所有5个div放在容器包装器中并在css中执行此操作：

#wrapper { display: table; }

使用此javascript（单击第二个div的示例）：

$('#secondDiv').css("display","table-header-group");
$('#firstDiv').css("display","table-row-group");
$('#thirdDiv').css("display","table-row-group");
$('#fourthDiv').css("display","table-row-group");
$('#fifthDiv').css("display","table-row-group");

但是我在div，我的对齐以及现有css的其他部分上弄乱了我的圆角。

这似乎不应该那么难，但我无法弄明白。谢谢你的帮助！

Answer 1

一个非常简单的解决方案：使用jQuery的prepend()将元素移动到顶部到父元素。

$("div").click(function() {    
    $(this).parent().prepend($(this));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Div1</div>
<div>Div2</div>
<div>Div3</div>
<div>Div4</div>
<div>Div5</div>
<div>Div6</div>
<div>Div7</div>
<div>Div8</div>
<div>Div9</div>
<div>Div10</div>

Answer 2

＆＃13;

$('.reorderable').click(function(){
  $(this).prependTo(this.parentNode);  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="reorderable">first</div>
  <div class="reorderable">second</div>
  <div class="reorderable">third</div>
  <div class="reorderable">fourth</div>
  <div class="reorderable">fifth</div>
</div>

＆＃13;

Answer 3

查看jQuery UI tools that enable sortable displays。

您的最终目标似乎与此jQuery UI功能一致。

使用jquery

3 个答案: