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

Question

我正在尝试实现拖放功能。在左边的窗格上，我会看到可以被认为是图像的瓷砖。在右侧窗格中，我将会使用iframe。我想从左窗格中拖动图块，然后将它们拖放到右窗格上的iframe。唯一的问题是我想将每个图像/磁贴与网页（在同一个域中）相关联，以便在放置时，关联的网页会在iframe中填充。

关于jQuery拖放工作方式以及HTML 5拖放方式的工作方式，有大量的文档。但我无法弄清楚的是，如何将图像映射到可在drop事件中填充的网页。

我想到的1个可能的事情是存储图像及其相应的网页具有相同的名称。这就是说，如果我有一个图像xyz.jpg，我会将其相应的网页命名为xyz.html。因此，在下降事件发生时，我会从“xyz.jpg”中删除“xyz”并将“.html”附加到它。所以结果是xyz.html，我将它放在使用jquery的iframe的“src”字段中。

这是一个很好的解决方案，或者有没有更好的方法来实现这个目标，这样我就不会有图像和网页同名的限制吗？将不胜感激关于这一点的任何帮助。

Answer 1

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

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

然后（假设jQuery的），你可以像这样访问他们：

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

或

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

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