why one html element's onmouseup event is not firing during drag and drop?

It does seem to work for me when I mouse up and down within the target, here's a "jsfiddle" with your code, plus a black border around the target: http://jsfiddle.net/prsYk/

However, when I mouse down and "drag" my mouse outside the target's region, and then mouse up - no event is fired. I would say this has everything to do with that fact that the mouse is no longer in the target's region when you mouse up.

This fiddle: http://jsfiddle.net/V4HPw/ shows that both events still fire when you attach the events to the document object, you currently are attaching them to your t target, which is the element with the black border.

If you implement actual dragging, where the element changes its positioning as you move your mouse, then the onmouseup event should fire when you release because you're still within the target's region.

Instead of re-inventing the wheel though, perhaps a Javascript library might help to kill the pain of implementing the actual drag/drop functionality:

Both of the above libraries will also provide you with the convenience methods to manipulation DOM elements, and much much more - as I notice your 'todo' note to learn about 'getting elements'.

Hope that helps!