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

Question

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

这最初是为了改进 jsbin 的代码编辑器布局而制作的，但它将是开源的，并且能够被任何元素使用。

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

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

我希望将它们中的任何一个拖到另一个 div 下方，甚至像这样放在两个 div 下方:

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

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

对此我采取了几种方法。

1. http://jsfiddle.net/weaponxi/Y9cyU/ :我尝试放置占位符，将每列分成四部分(左半部分，右半部分和上半部分，下半部分)，以便在拖放时它们将获得拖放元素大小的一半(底部/顶部或左/右)。看起来它可能有问题，因为占位符重叠并且不确定是否容易将它放到正确的容器中......当我正在研究这个时，我有另一个我想尝试的想法。

2. http://jsfiddle.net/weaponxi/nUMxn/ : 我记得有一个插件叫 ui layout for jQuery。我试过了，但发现它的效率不足以达到目的。不仅我必须为一个我不熟悉代码的插件编写拖放功能，他们只能将一个空间划分为左中心和右面板......我很快转向另一种方法。

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

4. 这只是一个想法，我还没有尝试过...也许使用表格会更好，因为我可以轻松地拆分单元格(理论上)。而且它们将永远相邻。唯一的问题可能是拖动:放下时，它如何知道它是向左/向右还是向顶部/底部移动？如片段 1 所示，这些占位符重叠。

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

Answer 1

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

该元素有详细的文档记录，因此您应该能够立即启动并运行。