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/