jQuery div / box重新定位（类似于hubpages胶囊）

Question

我正在寻找帮助设置一个带有重新定位div / box的页面。

我希望功能类似于如何使用HubPages设置胶囊，其中包括移动框：

1. 向上
2. 向下
3. 向右浮动（制作2列）
4. 更改为全宽（如果向右浮动）
5. 删除框
6. 插入新框

请参见屏幕截图：



我不想使用drag-n-drop 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