File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
The moose likes HTML, CSS and JavaScript and the fly likes onMouseUp in Safari Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login

Win a copy of Java Interview Guide this week in the Jobs Discussion forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "onMouseUp in Safari" Watch "onMouseUp in Safari" New topic

onMouseUp in Safari

Peter Chase
Ranch Hand

Joined: Oct 30, 2001
Posts: 1970
I have been trying to implement drag and drop in a Web interface, using
JavaScript. I have written my own, rather than use a library, because
the drag and drop has to play nicely with a table row
multiple-selection library that I also wrote.

I care about Internet Explorer 6+, FireFox 2+ and Safari 2+. It works
fine on the first two, but not on Safari.

The problem seems to be that Safari fires the onMouseUp event on the
element that was under the mouse when the mouse button went down. In
drag and drop, one has typically moved the mouse to a different element
(the drop target) by the time the mouse button comes up. On the other
browsers, the event fires on that element.

Is there any way to find out what element was under the mouse when the
button came up? I have tried the relatedTarget, currentTarget and
target attributes of the event, but so far not found what I want.

If not, any suggestions on how to make this work on Safari?

I notice Safari has its own non-standard (but IE-like?) events for drag
and drop. However, I don't really want to use those because (a) they
are non-standard so different code would be needed for different
browsers, (b) it probably wouldn't play nicely with my
multiple-selection library.

Betty Rubble? Well, I would go with Betty... but I'd be thinking of Wilma.
Eric Pascarello

Joined: Nov 08, 2001
Posts: 15385
I am guessing you found this page on your journey:

In most drag and drops, the element you clicked on is stuck to mouse so the onmouseup would be that element. (Want to have fun, drag the item to the edge of the page so your mouse is not on the browser. When you are off the browser release the mouse button and go back onto the page.

Peter Chase
Ranch Hand

Joined: Oct 30, 2001
Posts: 1970
In my drag and drop, I don't drag the originally-clicked element, because that would look silly (can't illustrate with pictures, so take my word for it). Instead, I drag a little document icon. I position this just to the right of the mouse pointer, so the mouse isn't over it.

On IE and FireFox, this works very nicely. The little icon gets dragged and an onMouseUp event fires from the place where I let go. On stupid Safari - a browser on a one-man mission to make even IE look good - it fires from the place I first clicked.

That wouldn't matter if there was any way to find out where you let go, but there isn't. Well, actually it might be possible to work it out, by comparing mouse position with element positions. That's a last resort, though, because anything to do with absolute positions is so horribly broken in DHTML.

Any other suggestions?
I agree. Here's the link:
subject: onMouseUp in Safari
jQuery in Action, 3rd edition