在屏幕上排列元素并保存其位置

Question

我想构建一个工具（包含HTML5，JS和CSS3），它可以帮助客户在网站模型上排列元素（例如文本块和图片）。我想保存这些的位置 元素，以便以后重建整个模型网站。

也许网格系统最好？

alt text http://img.skitch.com/20090817-t4p54kbxw3rj58mkmqxspj4qch.png

我很乐意就这一挑战的方法提出一些想法。有没有类似的项目，我应该看看？

此致

的Stefan

Answer 1

YUI有许多小部件可用于这种事情，有很多例子。

Drag & Drop: Examples

特别是这个例子

Drag & Drop: Using Interaction Groups

你只需要在drop事件上注册一个监听器就可以向服务器发送ajax请求并保存xy坐标。

另外，如果你想进行大小调整

Resize Utility: Examples

他们有一些非常简洁的例子，包括这个图像裁剪器

ImageCropper Control: Real Time Crop Feedback

Answer 2

jQuery框架可以帮助您同步JS和DHTML事件。至于使用它的其他项目，我不知道，但网格模型似乎是一个很好的方法。只要确保它比你现有的125px更精确：）

编辑：我在评论中提到的DHTML书中提到的网站是http://www.panic.com。您可以查看他们的JavaScript代码以获得一些灵感，因为他们实现了拖放系统来下载他们的产品。

Answer 3

不确定它是否有帮助，但我的“PanelManager”可能会让事情变得更容易一些（如果您还没有使用具有类似功能的更大框架）：

DP_PanelManager

“面板”只是普通的DOM元素，具有针对常见操作/修改（移动，调整大小等）的扩展。面板可以存在于一个或多个“PanelManagers”中，允许您将它们视为一个单元（排序，循环等）。

查看“拖拽与订购”示例，以获得您正在寻找的（我认为）的简化示例。然后，您需要进行相同类型的循环以保存您想要的任何信息（可能只是名称和位置）。

在任何情况下，可能会有一些代码可以撕掉 - 随意折叠，转动和/或毁坏。