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

Question

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

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

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

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

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

我确信还有许多其他优点和缺点，可能还有其他方法可以做到。因为我之前从未实现过向导，所以我想知道写一个向导的最佳方法。

谢谢！

Answer 1

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

话虽这么说，如果你有明确的设计规则来解释为什么你需要分页，那么上面的内容可能是错误的建议，所以接受或离开它。

HTH。