2

我正在尝试做的是通过将其拖放到页面上来创建可定位的布局。如果您知道如何在屏幕上重新排列 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. 这只是一个我没有尝试过的想法......也许使用表格会更好，因为我可以轻松拆分单元格（理论上）。他们将永远彼此相邻。唯一的问题可能是拖动：当被放下时，它怎么知道它是向左/右还是上/下？如片段 1 所示，这些占位符重叠。

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

4

1 回答 1

2

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

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

于 2012-12-11T12:23:42.717 回答