3

我知道我应该花更多的时间研究这个问题并在提出问题之前先试一试，但我只有 2 周的时间来建立一个带有门户风格主页的网站（很像http://www.bbc.co.uk）。

我对 jQuery 相当熟悉，过去也使用过 jQuery UI 可拖动对象，但我想知道是否有任何教程或最佳实践示例说明如何构建具有多个拖放区的门户以及记住哪些“portlet”具有被拖入某种状态对象中的哪些放置区。

我需要能够使用 $ajax() 调用将状态对象保存到后端，并在用户重新登录到站点时以某种方式重新组织 portlet，大概是通过从后端发送 JSON 状态对象.

只是一些关于从哪里开始的想法会很有用。谢谢

4

5 回答 5

5

我最近一直在考虑类似的事情。我能想到的最好的方法是在页面上放置几个“区域”来放置项目。在我的情况下，这些是 3 列。每次将一个块移动到不同的位置时，我都给了每个标识符并使​​用 Ajax 调用来更新该块的新位置。

例如，一个示例数据库表：

tbl.blocks:
  userid | blockid | column | placement
     1   |    2    |   1    |     3

其中 column 是一个简单的列标识符，placement 是该列中的位置。我在页面加载时使用了一个查询，该查询按放置顺序加载了块，然后将它们写入。blockid指的是块表。

这是我发现看起来相关的教程：http: //aymanh.com/drag-drop-portal-interface-with-scriptaculous

于 2009-01-31T12:06:08.477 回答
1

我的一个建议是使用后端生成的订购信息来构建页面，其中项目最初位于正确的位置，而不是依赖 javascript 在页面加载时重新排序它们。这将减少显示在用户眼前从默认变为他们选择的顺序的机会。即使关闭了 javascript，它也允许页面正确呈现，尽管它们显然会失去重新排序的能力。

我认为您很擅长使用 AJAX 将订单更改回传给服务器。您可以这样做的唯一其他方法是使用“编辑”模式，允许用户进行更改，然后“保存”以退出编辑模式。保存将回发当前的订单。我更喜欢 AJAX 方式，因为无论如何您都需要 Javascript 来处理拖放操作。

于 2009-01-31T14:04:14.900 回答
1

这是一个非常好的起点 - http://www.shopdev.co.uk/blog/sortable-lists-using-jquery-ui/。还可以在此处查看此参考 - http://docs.jquery.com/UI/Sortable。使用来自两个站点的信息，您可以尝试以下操作：

<div id='#left_sidebar'>
  <div id='box1'>somestuff</div>
  <div id='box2'>otherstuff</div>
</div>

$(#left_sidebar).sortable({
  update: function() {
     alert($("#left_sidebar").sortable("toArray"));
  }
});

你可以使用'serialize'而不是'toArray'。接下来，您需要使用 jquery/ajax 将数组（或字符串）发送到后端 - 尝试类似：

$.post(
  "backend_script.php", 
  $("#left_sidebar").sortable("toArray"), 
  onready_function()
);

该行应该替换上面代码中的警报 - 当您确定警报显示您想要看到的内容（并保存）时。

于 2009-02-18T04:18:02.510 回答
1

查看jQuery.portal 插件：它内置了对保存状态的支持。

于 2010-11-29T18:15:53.357 回答
0

要构建类似界面的自定义门户，您可以使用放置在三列布局中的简单 HTML div 元素。例如

 <ul id="col1">
    <li><div id="portlet1">...content...</div></li>
    <li><div id="portlet2">...content...</div></li>
</ul>
<ul id="col2">
    <li><div id="portlet3">...content...</div></li>
    <li><div id="portlet4">...content...</div></li>
</ul>
<ul id="col3">
    <li><div id="portlet5">...content...</div></li>
    <li><div id="portlet6">...content...</div></li>
</ul>

使用 JQuery sortable() API 并使用占位符值对所有li元素进行排序，该占位符值实际上显示了放置元素的位置。排序完成后，使用onDrop() API 保存每个小部件的位置。在这种情况下，您可以将其保存如下：

portlet1 -- 1,1 (row,column)
portlet2 -- 2,1 
portlet3 -- 1,2 
portlet4 -- 2,2 
portlet3 -- 1,3 
portlet3 -- 2,3

这些位置可以通过计算 DOM 中可排序元素的位置来获得。检索到这些位置后，可以将其保存在自定义数据库中，也可以在浏览器中离线保存（使用 HTML5 localStorage）。下次访问时，可以根据检索到的行和列值重新绘制 portlet。

希望这会有所帮助.. 可以在http://network.nature.com/workbench找到一个可行的示例（您需要注册并登录才能在重新定位后保存小部件）

于 2012-01-09T07:54:58.947 回答