如何实现支持拖/放照片的向导

Question

设置：
我有一个用 JS 编写的页面，有 3 个主要 div：相册、照片和图像容器。每张照片都是可拖动的，并且容器是可放置的（实际上放置的照片也可拖动以允许图像交换和删除）。我使用了 jquery-ui 库进行拖放。

要求：
现在，我想再添加 2 个页面，并将这 3 个页面放在一起成为一个向导，用户可以使用下一个和后一个按钮来回移动。

• 每个页面都显示照片的容器（当然，之前输入的所有数据都必须显示）
• “下一步”和“后退”按钮导航页面之间的移动并保存所有数据。
• 拖动的照片仍然可以在 div 上拖动
• ，应该与所有主要浏览器兼容，
• 易于实现；）

问题：
该案例的最佳解决方案是什么？
我想到了几个选项：

• 使用表单并使用提交按钮进行导航。 缺点：保存状态数据可能很棘手，因为图像容器需要保存图像操作，例如旋转和裁剪等。
• 使用 iFrame 作为照片和相册部分的包装器并替换图像的内容用户导航时每个页面的框架。 缺点：框架对 SEO 不友好（或者我错了？），图像可能很难在 iframe 和图像容器之间拖动。
• 使用 ajax 替换照片和相册 div 并加载不同的 div。

我确信还有许多其他优点和缺点，并且可能还有其他方法可以做到这一点。由于我之前从未实现过向导，所以我想知道编写向导的最佳方法是什么。

谢谢！

Answer 1

如果每个页面仅提供更多/新工具，则另一种选择是在用户来回“翻页”时简单地交换工具“调色板”。那么棘手的部分（保存图像的状态）就不那么棘手了。

话虽这么说，如果您对为什么需要分页有明确的设计规则，那么上面的建议可能是不好的建议，所以要么接受要么放弃。

HTH。