1

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>
hetaoblog
  • 1,990
  • 5
  • 26
  • 34

1 Answers1

1

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!

danjah
  • 2,939
  • 2
  • 30
  • 47
  • If you're not interested in using JS libraries, I threw this together very quickly: http://jsfiddle.net/m3PNV/ – danjah Feb 08 '12 at 03:51
  • Thx very much, so this means that when drag the element, even it looks as if it's been dragged to other place and the mouse is still in the region, actually the div has not been changed in the dom tree(thus the region has not changed), so the onmouseup event will not be fired if it's on the element rather than document; is this correct? thx. – hetaoblog Feb 08 '12 at 05:37
  • if the mouseup is event is attached to the element, but your mouse is outside of the element's region - it will not fire, correct. However, attaching mouseup to the document will catch it regardless of where you mouseup. The choice is yours on which you attach the mouseup event to, depending on your situation there may be advantages to using document or the target element for all event attchments. – danjah Feb 08 '12 at 20:09