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

【问题标题】：jQuery div/box reposition (similar to hubpages capsules)jQuery div/box 重新定位（类似于 hubpages 胶囊）
【发布时间】：2011-05-21 21:52:55
【问题描述】：

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

我想要类似于使用 HubPages 设置胶囊的功能，其中包括移动框：

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

例如看截图：

我不想使用拖放式 jQuery UI，而是使用按钮来重新定位框。

示例视频：http://www.youtube.com/watch?feature=player_detailpage&v=7SnOtOwTYoE#t=74s

【问题讨论】：

你说你不想要jquery拖放ui，但是你想要拖放（据我所知）并且你标记了你的问题jQuery和jquery-ui。或者等待不是错字？还是我没有正确理解您的问题？
是的，也许我描述得不够好。如果您曾经使用 HubPages 设置过集线器，您就会明白我的意思。如果它按我的需要工作，它可以使用 jQuery UI。它不是完全拖放，而是重新排列框的按钮：imgur.com/n4YRC.png
因此您需要一个预定义的“网格”，您可以在其中使用按钮将元素从一个单元格移动到另一个单元格。例如，您单击“右”按钮，元素会跳转到右列的按钮。对吗？
差不多，但是可以选择让单元格/div 移动：向上、向下、向右浮动（在其下方的框右侧浮动）、全宽（跨越所有列）。
你可以在这里看到它的实际效果：youtube.com/…

标签： jquery jquery-ui

【解决方案1】：

我认为这个链接可能会对你有所帮助：

jQuery Sortable Move UP/DOWN Button

Sortable using a up/down link

【讨论】：

【解决方案2】：

您可以仅使用 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>

这只是一个非常粗略的例子，说明如何实现这样的结果。

【讨论】：