CODEWITHSUNDEEP
javascriptjquery-ui
Steve
Steve

Reputation: 4908

Dragging divs from one window to another

I have window with some divs that are draggable. I also have a second window that I created with window.open() that has divs that are draggable. Is it possible now to drag a div from one window to the other?

Thanks

Upvotes: 3

Views: 848

Answers (4)

Steve
Steve

Reputation: 4908

From the answers provided I can see now that dragging between windows is really ugly. You have to basically transfer the mouse state from one window to the other and inject the element being dragged into the DOM of the destination window. I was hoping there was some jQuery around that you could run in both windows that would smooth all that over, but I guess not. I just won't do the drag in this project. I can just allow the user to click an element in the second window and have it appear immediately in the first window. Good enough. Thanks for looking at the question.

Upvotes: 1

Frederik.L
Frederik.L

Reputation: 5620

Take a look at this tutorial for the DnD part.

To achieve this, it's possible to pass a temp value that both sending and receiving window can read. It could be a cookie, or a better idea could be to use localStorage if it's available, as some people voluntarily block cookies for more privacy.

Using the Modernizr's fallback test, it could goes like this:

if (Modernizr.draganddrop) {
    // add drag and drop support
} else {
    // custom drag and drop support or suggest the user to get a real browser (if possible)
}

Whenever a drag is started :

if (Modernizr.localstorage) {
    window.localStorage['item_1_drag_started'] = true;
} else {
    document.cookie = "item_1_drag_started=1";
}

Then, when drag is over / mouse is up :

if (Modernizr.localstorage) {
    delete window.localStorage['item_1_drag_started'];
} else {
    document.cookie = "item_1_drag_started=0";
}

Now, when the mouse enters the other window, you may check if the item was still being dragged by accessing localStorage (or the dirty cookie if it's unavailable).

The only issue I can think of is when the user releases the mouse button while between those windows. That could be a problem, since the item will be considered dragging but you can't release a button that isn't pressed. Does anyone know about a trick to check if the mouse button is still pressed when entering a window even if it doesn't fired the event ?

In the meantime, the click event in the receiving window could simply check if it's still dragging then drop the item and remove the flag.

UPDATE: Concerning the mentionned issue, after digging a little and doing some test with events it seems that neither mouseover or mousemove is fired when a mouse button is still pressed (at least in Chrome where my tests have been made).

With that in mind, I think that the best approach to Drag and Drop between two windows is to toggle it:

  Click --> Drag is started

  Click again --> Drop the item

Upvotes: 2

Arun
Arun

Reputation: 3077

What you could do is on drag being, set a cookie and on mouse over the target window, check for the cookie and simulate the drag.

Upvotes: 0

Jonathan
Jonathan

Reputation: 9151

I guess you could set a variable "drag item = true" and store the item content somewhere. Then drop it on the mouse up in your popup.

Upvotes: 0

Related Questions