Drag and drop across browser windows?
October 14, 2006 10:02 AM Subscribe
Web dev Q: Is there a way to figure out what has been dragged and dropped from one browser window to another?
Suppose I have 2 Firefox windows. Window 1 contains an HTML page with an image on it. If I drag+drop the image from window 1 to window 2, Firefox knows that it should open the image in window 2. If the image was linked to a webpage, then it instead opens the linked page in window 2.
I'd like to be able to do the "window 2" part in my own web app. The user could drag and drop any image from any website onto my web app's page. My web app would then figure out what has just been dropped (image URL or linked page URL) and act on it, without the event propagating to Firefox's default behavior.
Is this possible? I've looked online, and it looks like the only way to do it is to have a signed Java applet, as box.net does. Any other way you can think of, using Javascript, Flash, etc.? Would a Firefox extension perhaps be an answer? Thanks for your help.
Suppose I have 2 Firefox windows. Window 1 contains an HTML page with an image on it. If I drag+drop the image from window 1 to window 2, Firefox knows that it should open the image in window 2. If the image was linked to a webpage, then it instead opens the linked page in window 2.
I'd like to be able to do the "window 2" part in my own web app. The user could drag and drop any image from any website onto my web app's page. My web app would then figure out what has just been dropped (image URL or linked page URL) and act on it, without the event propagating to Firefox's default behavior.
Is this possible? I've looked online, and it looks like the only way to do it is to have a signed Java applet, as box.net does. Any other way you can think of, using Javascript, Flash, etc.? Would a Firefox extension perhaps be an answer? Thanks for your help.
Response by poster: Thanks zixyer.
To clarify, it's ok for the drop to occur in a designated part of the window. I don't have to catch every drop that happens anywhere in the window.
posted by shortfuse at 12:54 PM on October 14, 2006
To clarify, it's ok for the drop to occur in a designated part of the window. I don't have to catch every drop that happens anywhere in the window.
posted by shortfuse at 12:54 PM on October 14, 2006
This would be very difficult. I'm not sure if it's impossible, even given the security restrictions between pages, but it would not be easy.
Any browser window can open a child window, and these two can communicate between each other. What you might be able to do is have the main window spawn a child window, that then opens up a remote page inside an IFRAME or the like. The problem, as you note, is you'll have to disable Firefox's built-in handling of drag-n-drop.
Basic timeline:
1. Open main window
2. Spawn child window (popup)
3. From child window, load remote webpage. You can do this in a number of ways. I'd probably kick off a CURL proxy that remotely grabs the content of a webpage, then displays it inside a frame. Once the content is loaded inside your child window, you basically have complete control over the events.
4. Clicking on an image retrieves the target. The target can be recorded in a number of ways... AJAX request to a server that holds the data, or simply save a local variable on the parent page.
5. While the mouse is held down, you cancel the event propogation but maintain the "pointer" mouse style to give the impression that you're actually dragging. Unfortunately, once your mouse moves to the main window, the mouse will turn back to normal, but this isn't a big concern as long as it works.
6. On the main (parent) page, an onmouseup event handler is set to recieve "dragged" events. Once it gets called, whatever the current image/page target that was sent is stored.
That's the basic idea, anyway.
posted by Civil_Disobedient at 2:00 PM on October 14, 2006
Any browser window can open a child window, and these two can communicate between each other. What you might be able to do is have the main window spawn a child window, that then opens up a remote page inside an IFRAME or the like. The problem, as you note, is you'll have to disable Firefox's built-in handling of drag-n-drop.
Basic timeline:
1. Open main window
2. Spawn child window (popup)
3. From child window, load remote webpage. You can do this in a number of ways. I'd probably kick off a CURL proxy that remotely grabs the content of a webpage, then displays it inside a frame. Once the content is loaded inside your child window, you basically have complete control over the events.
4. Clicking on an image retrieves the target. The target can be recorded in a number of ways... AJAX request to a server that holds the data, or simply save a local variable on the parent page.
5. While the mouse is held down, you cancel the event propogation but maintain the "pointer" mouse style to give the impression that you're actually dragging. Unfortunately, once your mouse moves to the main window, the mouse will turn back to normal, but this isn't a big concern as long as it works.
6. On the main (parent) page, an onmouseup event handler is set to recieve "dragged" events. Once it gets called, whatever the current image/page target that was sent is stored.
That's the basic idea, anyway.
posted by Civil_Disobedient at 2:00 PM on October 14, 2006
You can do this with an editable iframe. Put an iframe pointing to an empty document, and then set:
document.getElementById("myiframe").contentDocument.designMode = "on"
Now your iframe is editable, which means the user can click in it and type, or paste stuff in, or, most importantly, drop images into it.
Then write a function that looks for any images in that document, and does whatever you need to do. Make it run once or twice a second (e.g. using setInterval).
For polish, you might be able to use some kind of onfocus handler to prevent the user from typing in the iframe. And if you don't want the dropped image to actually appear, you can put some CSS (img { display: none; }) in the iframe document.
I've done something like this, and it works in IE/Firefox for sure. Don't know about any other browsers, e.g. Safari.
posted by Sxyzzx at 9:43 PM on October 14, 2006
document.getElementById("myiframe").contentDocument.designMode = "on"
Now your iframe is editable, which means the user can click in it and type, or paste stuff in, or, most importantly, drop images into it.
Then write a function that looks for any images in that document, and does whatever you need to do. Make it run once or twice a second (e.g. using setInterval).
For polish, you might be able to use some kind of onfocus handler to prevent the user from typing in the iframe. And if you don't want the dropped image to actually appear, you can put some CSS (img { display: none; }) in the iframe document.
I've done something like this, and it works in IE/Firefox for sure. Don't know about any other browsers, e.g. Safari.
posted by Sxyzzx at 9:43 PM on October 14, 2006
This thread is closed to new comments.
posted by zixyer at 11:24 AM on October 14, 2006