具有可调整大小的小部件的小部件样式网站，其宽度可以超过一列答案

【问题标题】：Widget style website with resizable widgets that can be wider than one column具有可调整大小的小部件的小部件样式网站，其宽度可以超过一列
【发布时间】：2012-07-02 12:37:56
【问题描述】：

我需要创建一个使用小部件的网站。我找到了一种方法来创建像Google IG 这样的布局，但我也希望能够调整小部件的大小。一个小部件应该有可能跨越两列，其他较小的小部件在其上方或下方。可以在Protopage 网站上找到我想要的示例。

简而言之，我想：

1. Use widgets
2. Be able to resize widgets in both height and width
3. Add and remove widgets
4. Move widgets

如果我有关于如何创建像 Protopage 这样的网站的文档，我想我会有足够的信息。

我想使用 JQuery 创建一个带有 MVC3 的 Azure Web 角色。 JQuery 将是创建小部件的最重要部分，那么是否有最适合此的框架/插件？我见过Isotope 和Masonry，但它们都没有展示如何通过拖放来调整大小或移动小部件。任何帮助将不胜感激。

【问题讨论】：

标签： jquery-ui widget

【解决方案1】：

这个小插件允许它们被拖动和重新调整大小，并且它们可以“捕捉”到彼此。它们不会捕捉到页面上的“网格”，而是彼此捕捉。 https://github.com/polomoshnov/jQuery-UI-Resizable-Snap-extension演示：http://fiddle.jshell.net/5xB7S/show/light/

更新：如果您不想要插件，这是一个从头开始的方法。从头开始完全按照您的需要创建它应该不会太难。

http://jsfiddle.net/xv57M/8/

这里是一些代码，一切见fiddle...

//CSS
#grid table{ position:absolute; width:600px; top:0px; }
#grid table td{ height:150px; width:300px; }

.item { position:absolute; width: 300px; height: 150px; background: rgba(54, 25, 25, .5); }
#item1 { top:10px; }
#item2 { top:160px; }
#item3 { top:310px; }

//JS
$(function() {
    $( "#item1" ).resizable({ grid: 300 });
    $( "#item2" ).resizable({ grid: 300 });
    $( "#item3" ).resizable({ grid: 300 });

    $( "#item1" ).draggable({ grid: [ 300, 150 ] });
    $( "#item2" ).draggable({ grid: [ 300, 150 ] });
    $( "#item3" ).draggable({ grid: [ 300, 150 ] });
});

【讨论】：