HTML5/JQuery 拖放（在拖放事件中拖动图像并在 iframe 中填充相应的网页）答案

【问题标题】：HTML5/JQuery Drag and Drop (Dragging an image and populating a corresponding webpage in an iframe at drop event)HTML5/JQuery 拖放（在拖放事件中拖动图像并在 iframe 中填充相应的网页）
【发布时间】：2012-07-03 07:31:39
【问题描述】：

我正在尝试实现拖放功能。在左侧窗格中，我将拥有可以被视为图像的图块。在右侧窗格中，我将拥有 iframe。我想从左窗格中拖动图块并将它们放到右窗格上的 iframe 中。唯一的问题是我想将每个图像/图块与一个网页（在同一个域中）相关联，这样在放置时，相关的网页就会填充到 iframe 中。

关于 jquery 拖放如何工作以及 HTML 5 拖放如何工作的大量文档。但我不知道如何将图像映射到可以在放置事件时填充的网页。

我能想到的一件事是存储图像及其同名的相应网页。也就是说，如果我有一个图像 xyz.jpg，我会将其对应的网页命名为 xyz.html。所以在drop事件的时候，我会从“xyz.jpg”中去掉“xyz”并将“.html”附加到它上面。所以结果是 xyz.html，我将使用 jquery 将其放入 iframe 的“src”字段中。

这是解决问题的好方法还是有更好的方法来解决这个问题，这样我就没有图像和网页同名的限制？非常感谢您对此提供任何帮助。

【问题讨论】：

标签： jquery html drag-and-drop

【解决方案1】：

只需使用数据标签。例如：

<img src="blah.jpg" data-url="http://google.com/" />

然后（假设是 jquery），您可以像这样访问它们：

$(image).attr('data-url');

或

$(image).data('url');

jsFiddle：http://jsfiddle.net/jQKV4/

【讨论】：

谢谢伙计。正是我想要的！！