jQuery div/box重新定位（类似于hubbages）

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

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

向上

向下

向右浮动（形成两列）

更改为全宽（如果向右浮动）

拆下箱子

插入新框

例如，请参见屏幕截图：

我不想使用拖放jqueryui，而是使用按钮来重新定位框

---

示例视频：

您可以只使用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'）

）

...

---

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

您可以只使用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'）

）

...

---

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

我认为这些链接可能会帮助您：

---

我认为这些链接可能会帮助您：

---

你说你不想要jquery拖放ui，但你想拖放（据我所知），你把你的问题标记为jquery和jquery ui。或者等等，难道不是打字错误吗？还是我没有正确理解你的问题？是的，也许我描述的不是最好的。如果你曾经用HubPages设置过Hub，你就会明白我的意思。它可以使用jQueryUI，如果它按照我所需要的方式工作的话。它不是拖放，而是重新排列框的按钮：因此您需要一个预定义的“网格”，可以使用按钮将元素从一个单元格移动到另一个单元格。例如，单击“右”按钮，元素跳转到右列的按钮。这是对的吗？差不多，但是可以选择让单元格/div移动：向上、向下、向右浮动（在它下面的框的右侧浮动）、全宽（跨越所有列）。你可以在这里看到它的作用：你说你不想要jquery拖放ui，但你想拖放（据我所知），并且你标记了你的问题jquery和jquery ui。或者等等，难道不是打字错误吗？还是我没有正确理解你的问题？是的，也许我描述的不是最好的。如果你曾经用HubPages设置过Hub，你就会明白我的意思。它可以使用jQueryUI，如果它按照我所需要的方式工作的话。它不是拖放，而是重新排列框的按钮：因此您需要一个预定义的“网格”，可以使用按钮将元素从一个单元格移动到另一个单元格。例如，单击“右”按钮，元素跳转到右列的按钮。是这样吗？差不多，但是可以选择让单元格/div移动：向上、向下、向右浮动（在下方框的右侧浮动）、全宽（跨越所有列）。您可以在这里看到它的作用：