Disable redirect on drag image or link

Question

The problem is the following:

I am using a tinymce editor (not related with the problem) and an external image manager aplication. We use the drag&drop functionality for users, to just drag the image from the image manager to the tinymce content area.

However, there is a problem when the user inadvertantly drags the image outside the content area. The browser opens the link inside the window it was dragged to, losing the form the user had in front of them.

I am wondering if there is some way to catch this link-drop event, to disable the redirect in the browser. If you want to see the problem, just have 2 windows open, and drag an image from one window to the other one.

The sollution can also be html/css if possible, not necessary to be in JS.

Answer 1

Use an onbeforeunload event on the body. Basically, it pops a dialog saying (you specify the string), "Are you sure you want to leave the page?". If they click Cancel, they will stay on the current page. StackOverflow itself (among other sites) uses this technique.