gsb wrote:
Thanks for the quick response Andy.
And if I am not mistaken, I have learned from some of your earlier works in
the DHTML area on the web. Thanks.
I agree and these codes are activated via a mouse down on an element.
They are to be removed upon the mouse release.
So tracking is only during the "dragging" state.
And that is why my question for my attempt at tracking, currently for
testing, worked with mouse over/out but not mouse down/up.
And as you guessed, it is a dragging scheme I have in mind but was trying to
distill the question down for the post.
IE is nice but I am also trying to be as "cross-browser" compliant as
possible.
Again thanks and any further suggestions will be appreciated.
gsb
Hello
No probs, I gather for your response that you were unable to get it working?
The code snippit in my last post was for X-browser the if(
window.attachEvent ){ e = event; } is testing for IE and assigning the
event object to the e param passed to the function in the way mozilla
handles it.
I have knocked up a very simple x-browser example below. Sorry about
the wrapping if you'd like a better copy email me and I will send you one.
HTH
Andy
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Drag Demo</title>
<script>
// Array to hold starting point of mouse in relation to
// the Element the is being moved.
var MousePosition = [0,0];
// Just debuging and to show mouse pointer values.
var eDebug = null;
var nDebugLine = 0;
var lDebug = true;
function init()
{
// Create and append an element the will be draged
// it doesn't have to be created like this i just
// prefer to create elements this way.
var eElement = document.createElement("div");
eElement.appendChild( document.createTextNode("DragMe!") );
eElement.id = "Element 1";
eElement.className = "DragableElement"
document.body.appendChild( eElement );
// Attach to the onmousedown event to enable draging;
eElement.onmousedown = function ( e )
{
// Browser Check
if( window.attachEvent )
{
// IE assign the X & Y cords of the mouse pointer
// in relation to top left of the element
MousePosition[0] = event.offsetX;
MousePosition[1] = event.offsetY;
}
else
{
// Same for For gecko browsers
MousePosition[0] = e.layerX;
MousePosition[1] = e.layerY;
}
EnableDrag( this );
}
// Attach to the onmouseout event to disable the draging.
eElement.onmouseup = function ()
{
DisableDrag( this );
}
// Just for Showing pointer values
eDebug = document.getElementById( "debug" );
}
function EnableDrag( eElement )
{
WriteToDebug("Drag is Enabled for : " + eElement.id + " || Mouse
Position : " + MousePosition);
// Attach to the onmousemove event
document.body.onmousemove = function(e)
{
if( window.attachEvent ){ e = event; } // IE test
WriteToDebug("e.clientY : " + e.clientY + " || " + "e.clientX : " +
e.clientX + " || Mouse Position : " + MousePosition);
// Moving the Element. e.client# it the position of the mouse pointer
// in relation to top left of the viewable area hence the subtraction
// of MousePosition[#].
eElement.style.left = e.clientX - MousePosition[0] + "px";
eElement.style.top = e.clientY - MousePosition[1] + "px";
}
// Making onselectstart retun false stops the selection of text
// while the mouse is moving.
document.body.onselectstart = function(){ return false; };
}
function DisableDrag( eElement )
{
WriteToDebug( "Drag has beed disabled for : " + eElement.id );
// UnAttach the onmousemouse and onselectstart events
document.body.onmousemove = null;
document.body.onselectstart = null;
}
function WriteToDebug( cText )
{
if( lDebug )
{
eLine = document.createElement( "div" );
eLine.appendChild( document.createTextNode( nDebugLine + " : "+
cText ));
eDebug.insertBefore( eLine, eDebug.firstChild );
nDebugLine++;
}
}
</script>
<style>
.DragableElement {position:absolute; top:100px; left:100px;
width:100px; height:100px; border:solid 1px black;
background-color:ButtonFace; padding:10px; }
#debug{ position:absolute; bottom:0px; right:0px; height:100px;
width:400px; color:black; background-color:AppWorkspace; overflow:auto;
font-size:.6em; padding:10px; border:inset 1px AppWorkspace;}
</style>
</head>
<body onload="init()">
<div id="debug">
</div>
</body>
</html>
