如何通过让用户添加和删除小组件来创建可自定义的仪表板

How to create a customizable dashboard by letting the user add and remove the widgets?

本文关键字：创建自定义仪表板组件何通过用户添加删除更新时间：2023-09-26

我正在尝试构建一个具有可自定义功能的仪表板，例如调整不同的<div>，拖放不同的<div>，添加不同的<div>，从而记住放置<div>的位置。此仪表板类似于iGoogle的仪表板。

问题1(如果我没记错的话，这些<div>被称为小部件。是吗？

我已经浏览了有关此的网络，并找到了大多数教程/链接，用于将已经构建的小部件从某些外部源继承到您的网页，但这不是我想要的。我想构建自己的小部件(例如：-在饼图中表示一些JSON数据可以是一个小部件，在条形图中表示相同的数据可以是另一个(。所以，我的下一个问题是：-

问题2(我将有一个单独的 url，让用户根据自己的需要选择小部件。那么，我是否在初始时间隐藏每个小部件的<div>，并在用户启用它们时取消隐藏它们，或者还有其他方法可以做到这一点？
PS：肯定还有其他方法，因为在浏览iGoogle的源代码时，他们会在用户启用该小部件后添加它。那么这是怎么做到的呢？

问题3(如何保存<div>的位置？

问题 1(是的，它们可以称为小部件。相当多的Javascript框架，如jQuery UI，包括移动元素，将它们捕捉到网格等功能 http://jqueryui.com/draggable/#snap-to。

问题2(我只会根据用户选择/允许查看的内容加载小部件，否则所有小部件都将在页面上，只是隐藏 - 然后用户可以取消隐藏这些小部件，允许他们看到他们可能无法访问的内容。

您可以通过多种不同的方式将小部件加载到页面上。一种方法是通过服务器端(PHP等(找出用户在页面加载时选择了哪些小部件，并在用户看到页面之前加载这些小部件。或者通过Ajax，这将允许您加载页面，然后可以将小部件添加到页面中 - 如果您想将小部件动画化到页面上，或者如果小部件上有很多数据，这可能意味着加载需要一段时间。

问题3(使用我在 Q1 中的示例，您可以在用户删除div 时捕获 X、Y 坐标，并使用 Ajax 将这些坐标触发到服务器，然后将这些坐标存储到该用户的小部件上。当用户下次加载页面时，您可以使用这些坐标将小部件加载到正确的位置。