如何在 jquery UI 中构建具有可保存状态的门户页面？答案

【问题标题】：How to build a portal page with saveable state in jquery UI?如何在 jquery UI 中构建具有可保存状态的门户页面？
【发布时间】：2009-01-31 11:51:09
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript jquery jquery-ui drag-and-drop

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

这是一个很好的起点 - 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"));
  }
});

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

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

要构建类似门户的自定义界面，您可以使用放置在三列布局中的简单 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 并使用 placeholder 值对所有 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 找到一个可行的示例（您需要注册并登录才能在重新定位后保存小部件）

【讨论】：