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

it looks to me that all tutorial about html drag and drop set the onmousedown and onmouseup events to the document rather than the element itself, and as i tested with below codes, when clicking the element, both the onmousedown and onmouseup event will be triggered, but when try to drag the element and drop it at another place, the onmouseup event is not fired,

I use below codes, my question is: why onmouseup is not fired when dragging? I use firefox 8.0.1

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Border</title>

<style type="text/css">
body{
background-color: gray;
}

#page{
margin: 20px auto;
width:800px;
height:639px;
/*background-image: url("./img/board.jpg");*/
background-image: url("https://www.google.com/logos/2012/dickens-2012-HP.jpg");
background-repeat:  no-repeat;

}

#target{
position: relative;
top: 10px;
left: 20px;
/*background-image: url("./img/target.jpg");*/
background-image: url("https://www.google.com/images/icons/product/chrome-48.png");
background-repeat:  no-repeat;
width: 145px;
height:117px;

}

</style>

<script type="text/javascript">

function mylog(msg)
{
    if(window.console && console.log){
        console.log(msg);
    }
}



window.onload = function(){ 
    initdragdrop();

}

/* 
todo: learn how to make a getObject()
function getObject(id){
    var t = document.getElementById(id);

    this.x = t.left;
    this.y = t.top;
}
 */

function initdragdrop(){    
    var t = document.getElementById('target');


    t.onmousedown = function(){

        this.status = 'down';
        mylog(this.status);

    }


    t.onmouseup = function(){
        this.status = 'up';

        mylog(this.status);
    }

}

</script>

</head>
<body>

<div id="page">


<div id="target">

</div>

</div>


</body>
</html>

Solution

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!