Question

I am trying to implement a drag and drop feature. On the left pane I will be having tiles which could be thought of as images. On the right pane I would be having iframes. I would like to drag the tiles from left pane and and drop them off to iframes on right pane. The only catch is I want to associate each image/tile with a webpage (in the same domain), such that at the time of drop, the associated webpage gets populated within the iframe.

There is extensive documentation on how jquery drag drop works and how HTML 5 drag drop works. But what I could not figure out is how do I map an image to a webpage which could be populated at drop event.

1 possible thing I could think of is storing the image and its corresponding webpage with same name. That is if I have an image xyz.jpg, I would have its corresponding webpage named as xyz.html. So at the time of drop event, I would strip out “xyz” from “xyz.jpg” and append “.html” to it. So the result is xyz.html which I would put in the “src” field of iframe using jquery.

Is this a good solution to the problem or is there any better way to accomplish this, so that I dont have the restriction of having same name for image and webpages? Would greatly appreciate any help with regards to this.

Answer 1

Just use data tags. Eg:

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

Then (assuming jquery), you can access them like so:

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

or

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

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