Why is onMouseUp not firing?

I have a div, with an onMouseUp event set (in HTML). Within that div are many elements, some of which contain icons for handles that I want to drag. The icons have an onMouseDown event.

When I drop the mouse on an icon and release it, first the icon's on开发者_开发问答MouseDown event fires, then the div's onMouseUp event fires - exactly as I would expect.

However when I click down on the icon, drag it to another part of the div, and release, the mouseDown event is fired as you would expect, and the onmouseUp event is NOT fired.

I have two questions.

1) Why is this the behaviour?

2) What is the correct way to handle drag-drop in a browser independant way?

I am using firefox 3.6.16 on widows, but IE 8 behaves the same way.

I know this doesn't seem like it's a fair answer, but the best answer (in my opinion) is to use something like jQuery and use draggable. I've only worked with Dojo and jQuery but both have an easy to use drag/drop interface that is browser independent.

Here's a url explaining jQuery's.

http://jqueryui.com/demos/draggable/

I'm just wrestling with this today. There is a nice demo at http://www.brainjar.com/dhtml/drag/demo.html that uses raw Javascript (with all the browser checks that that implies). It looks like the key is to stop event propagation on the mousedown event.

I'm working with Dojo, and using dojo.stopEvent in the dragStart (that is, the function attached to mousedown) made the difference in my seeing the mouseup.