HTML 拖放持久性

HTML drag and drop persistance

本文关键字：持久性拖放 HTML 更新时间：2023-09-26

我想给用户一个拖放屏幕，他们可以在其中移动东西。我可以使用HTML5和JQuery Draggable来实现这种体验。

问题是，我如何保留服务器端元素的位置，以便在用户重新访问页面时可以重新创建新位置。我不想跟踪每个（x，y）坐标并存储在数据库中，相反，我想在用户移动元素时动态生成一个"自定义"css文件，然后将该css文件存储在服务器中。不幸的是，我只知道我不知道如何跟踪运动并生成css文件。

任何提示或一些这样做的框架都会有所帮助。

刚刚玩过这个 http://jqueryui.com/draggable/，我观察到每当我们移动div 时，它都会改变其内联样式（顶部、左侧、右侧、底部）。我在移动后复制了它的样式属性并刷新了页面。

刷新后，div 返回到原始位置，现在我将复制的样式属性粘贴到div 中，它采用了我复制样式的先前状态。

因此，您可以将元素 Id 数组保留为键，将样式属性保留为值。将其上传到服务器，或者您可以使用 localStorage @ 客户端。在页面上重新加载获取数组并将内联样式设置回:)

我在过去的项目中有类似的要求，但下降目标是固定的......就像瓷砖可以拖放到<li>元素数组上一样。我通过按顺序仅存储<li>元素的索引来处理它。

我建议您研究 http://diveintohtml5.info/storage.html 以将值存储在客户端。否则，您可能会将值作为服务器上的 YAML 或 JSON 来影响，但这将比与此线程相关的方法更多。