制作可灵活调整大小和定位的可拖动布局

Question

我要做的是通过在页面上拖放来创建可定位的布局。如果您知道如何在屏幕上重新排列 Adob​​e 产品或 Visual Studio 的工具面板，那么您可能对我将要演示的内容有所了解。

这最初是为了改进 jsbin 的代码编辑器布局，但它将是开源的，并且可以被任何项目使用。

在我的实验中，我有 5 列是 div。布局如下：

+------+------+------+------+------+
|      |      |      |      |      |
|      |      |      |      |      |
|      |      |      |      |      |
|      |      |      |      |      |
|      |      |      |      |      |
|      |      |      |      |      |
+------+------+------+------+------+

我希望将它们中的任何一个拖到另一个 div 下方，甚至放在两个 div 下方，如下所示：

+------+------+------+
|      |      |      |     
|      |      |      | 
|      |      |      |  
|      |      |======+ 
|=============|      |   
|             |      | 
+------+------+------+

我还希望它们可以在内部边缘调整大小，以便可以调整它们以适应任何舒适的布局。

对此我采取了几种方法。

1. http://jsfiddle.net/weaponxi/Y9cyU/ ：我尝试放置占位符，将每列分为四部分（左半右半和上半下半），以便在拖放时它们将获得被放置元素的一半大小（或者底部/顶部或左/右）。不过，这似乎是有问题的，因为占位符重叠并且不确定是否很容易将其放到正确的容器中......当我正在处理这个问题时，我有另一个想法，我想尝试。

2. http://jsfiddle.net/weaponxi/nUMxn/ ：我记得有个插件叫 jQuery 的 UI 布局。我试过了，但发现它的效率不够。不仅我必须为我不熟悉代码的插件编写拖放功能，而且它们只能将空间划分为左中右面板......我很快转向另一种方法。

3. http://cssdeck.com/labs/3otgmqz5/0：这是在黑暗中拍摄的。这是我发现的另一个插件，名为 Gridster for jQuery。它基本上为您提供了一个网格，您可以在其中移动框。我想我可以添加一个调整大小选项以使其工作（尽管由于重新调整大小造成的空间占用不完美，它会有网格的空白）它本可以工作，但它没有按预期工作（我一定是做错了什么，因为只有当您在“重新调整大小”时快速摇动盒子或开始拖动它时，它才会重新调整大小）

4. 这只是一个我没有尝试过的想法...也许使用表格会更好，因为我可以轻松拆分单元格（理论上）。他们将永远彼此相邻。唯一的问题可能是拖动：当被放下时，它怎么知道它是向左/右还是上/下？这些占位符重叠，如 sn-p 1 所示。

尝试这样的事情时我应该采取什么方法？这些想法中的任何一个有用吗？我感谢所有的意见。

Answer 1

看看Gridster。这里有一个很好的例子 (http://jsfiddle.net/PrtrR/2/embedded/result/) 的可拖动和可调整大小的布局。

该项目有据可查，因此您应该能够立即启动并运行。