...

View Full Version : drag help



chris_394
06-28-2006, 03:53 AM
Beginning of Update:

I figured out the problem. It was related to the use of document.body as the target for my mousemove event, when it should have just been document. I have bolded the changed code in case someone is interested in learning about potential pitfalls. Also, it seems that the use of the moveflag isn't really needed, as the removeEventListener in the endmove function is sufficient to end the movement and the initmove function is sufficient to start the movement.

Does anybody know why using document.body.addEventListener("mousemove",maindragbox.makemove,false); instead of document.addEventListener("mousemove",maindragbox.makemove,false);
fixed the problem of the cursor losing hold of the handle?

End of Update

Hello,

I am writing a dragging script for fun where the user drags the object by the handle, but have run into a problem where the cursor loses hold of the handle and the dragging stops. I have tried searching the forum for similar problems, but have not found any answers.

Here is the complete code including the css which was tested in Firefox 1.5.



<html>
<head>

<style type="text/css">

div.dragbox
{
position:absolute;
width:100px;
height:100px;
zIndex:1000
}

div.handle
{
width:100%;
height:16px;
background-color:red;
cursor:move;
zIndex:1001
}

span.handletext
{
zIndex:1000
}

</style>

<body>

<div id="dragbox" class="dragbox">
</div>

<div id="handle" class="handle">

</div>

<div id="dragcontent">
<p>Hi how are you doing.</p>
<p>I am very well thank you.</p>
</div>

<script type="text/javascript">

var maindragbox =
{
dragbox:false,
handle:false,
handletext:false,
dragcontent:false,
moveflag:false, //This is not really needed

initbox : function()
{
this.dragbox = document.getElementById("dragbox");
this.handle = document.getElementById("handle");
this.handletext = document.getElementById("handletext");
this.dragcontent = document.getElementById("dragcontent");

this.dragbox.appendChild(handle);
this.dragbox.appendChild(dragcontent);

this.dragbox.style.left = 300;
this.dragbox.style.top = 100;

this.oldx = parseInt(dragbox.style.left);
this.oldy = parseInt(dragbox.style.top);

this.handle.addEventListener("mousedown",this.initmove,false);
this.handle.addEventListener("mouseup",this.endmove,false);
},

initmove : function(e)
{
this.oldmx = e.clientX;
this.oldmy = e.clientY;
this.oldx = parseInt(dragbox.style.left);
this.oldy = parseInt(dragbox.style.top);

this.moveflag=true; //Not needed
/*
Using document.body as a target will cause the cursor to lose hold of the

handle. Use document.addEventListener instead
*/
document.body.addEventListener("mousemove",maindragbox.makemove,false);

},

makemove : function(e)
{
if(handle.moveflag)
{
var newleft = Math.max(0,handle.oldx + e.clientX - handle.oldmx);
var newtop = Math.max(0,handle.oldy + e.clientY - handle.oldmy);
dragbox.style.left = newleft + 'px';
dragbox.style.top = newtop + 'px';
}
},

endmove : function(e)
{
//this.removeEventListener should instead be

//document.removeEventListener

this.removeEventListener("mousemove",maindragbox.makemove,false);
handle.moveflag=false; //Not needed
}

};

var mydragbox = maindragbox;
mydragbox.initbox();


</script>

</body>
</head>
</html>


Thank you for your help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum