jqueryでdivを垂直方向に再構成

Question

私は5つのdivがページの下に垂直に下がっています。

私はいずれかをクリックして、最初のdivになるようにしたいのですが、その方法では "list"の先頭です。完璧な世界では、他のものは不透明度を薄暗くし、クリックされたものは上にスライド/アニメーションし、他のものは滑ってしまう。しかし、それは後で来ることができます。 CSSでdivの並べ替えが行われているのが見えましたが、それはページ上で連続的に動的ではありません。

私は、コンテナラッパー内のすべての5つのdivを置くとCSSでこれをやってみました：このJavaScript（第2のdivをクリックするための一例）と

#wrapper { display: table; }

を：

$('#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

jQuery UI tools that enable sortable displaysを見てください。

あなたの最終目標は、このjQuery UI機能と一貫しているようです。

Answer 3

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

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