用jQuery訂購div

Question

我有一些數據的div：

<div id="div_1">data1</div>
<div id="div_2">data2</div>
<div id="div_3">data3</div>

我想允許用戶按自己喜歡的方式訂購它們。 這樣做的最佳解決方案是什么？ 我正在考慮為每個div添加兩個箭頭按鈕，並可以上下移動它們。

Answer 1

jQuery UI具有可滿足您需求的可排序組件： http : //jqueryui.com/sortable/

Answer 2

嘗試

 $("i").each(function(i, el) { el.title = "click"; var div = $("div"); $(el).on("click", function(e) { var elem = $(this).parent(); if ($(this).index() === 0) { elem.next().is(div) ? elem.insertAfter(elem.next()) : elem.insertBefore("div:first") } else { elem.prev().is(div) ? elem.insertBefore(elem.prev()) : elem.insertAfter("div:last") } }) }); 

 div { font-size:32px; } i { display:inline-block; font-style:normal; opacity:0.25; font } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <div id="div_1"><i>⬇</i>data1<i>⬆</i></div> <div id="div_2"><i>⬇</i>data2<i>⬆</i></div> <div id="div_3"><i>⬇</i>data3<i>⬆</i></div>