jQuery的div /盒重新定位（類似hubpages膠囊）

Question

我正在尋找一些幫助建立一個網頁與重新位置divs /盒。

我想類似的功能如何，你可以設置膠囊HubPages的，其中包括移動箱：

1. 最多
2. 下
3. 浮動權（使2列）
4. 更改爲全寬（如果右上浮動）
5. 刪除框
6. 插入新框

例如見截圖：

我不想使用拖放正下降jQuery UI的，而是有按鈕來重新定位框。

實例視頻：http://www.youtube.com/watch?feature=player_detailpage&v=7SnOtOwTYoE#t=74s

Answer 1

你可以只使用jQuery的做一個有點低級別的DOM操作。例如，移動框起來：

$('a.move-up').click(function(){ 
    var prev = $(this).parent().prev();  // get the preceding element 
    var self = $(this).parent().clone(true); // copy the parent element, including all event handlers attached to itself and its children 
    $(this).parent().remove();    // remove the parent 
    prev.before(self);      // place the parent before the preceding element to "move it up" 
}); 

上述代碼假定下面的標記，但可容易地適用於你可以具有任何其他標記（$(this).parents('div')例如）

<ul> 
<li><a href="" class="move-up"></a></li> 
... 
</ul> 

這僅僅是一個非常粗略的例子，你如何能夠實現這樣的結果。

Answer 2

我覺得這個鏈接可能幫助你：

jQuery Sortable Move UP/DOWN Button

Sortable using a up/down link