/* This script lets the user drag objects around on pages.
* Feel free to use it as you see fit.
* Written by Micah Taylor, http://descender.kixor.net on 2003-7-6
* last modified: 2003-2-4
*
* To use: link to this source file, and add the line
* onclick="startDrag(event, this);" to the element tag that you wish to drag.
*/
var offsetX;
var offsetY;
var obj;
var moving = false;
var drag = true;
/* start the drag
* e: the click event (handled automatically)
* ob: the object to start the drag with
*/
function startDrag(e, ob)
{
//if drag is turned off, exit
if(!drag)
return;
//if event e exists use it, else use IE event. same as:
// var ev = if( e ) { e } else { window.event }
var ev = e? e : window.event;
obj = ob;
// this next batch of code prevents the event from propagating
// back up and being caught as highlight text command (doesn't always work)
// fix for IE's stupid implementation
if(document.all)
{
ev.cancelBubble=true;
ev.returnValue = false;
}
// else, it's a normal browser
else
{
ev.preventDefault();
ev.stopPropagation();
}
// update the object's left/top values
// the offsets of the distance from the top left corner
// fix: need to add bottom and right checking
// if the object is using absolute positioning, then just get the distance
// from the top corner
if(obj.style.position == "absolute")
{
obj.style.left = obj.offsetLeft+"px";
obj.style.top = obj.offsetTop+"px";
}
// if using relative positioning, then we need to calc the new values
else if (obj.style.position == "relative")
{
if( obj.style.left.indexOf('%') > 0)
//obj.style.left = parseInt(obj.style.left) * parse
document.asdf.asdf5.value=obj.parentNode.style.width;
if( isNaN(parseInt(obj.style.left)) )
obj.style.left = "0%";
if( isNaN(parseInt(obj.style.top)) )
obj.style.top = "0%";
}
else
{
obj.style.position = "relative";
obj.style.left = "0%";
obj.style.top = "0%";
}
// get the offset (distance from corner to click)
offsetX = ev.clientX - parseInt(obj.style.left);
offsetY = ev.clientY - parseInt(obj.style.top);
//start moving
moving = true;
//when the mouse goes up, call stopDrag, when the mouse moves, call move
document.onmouseup=stopDrag;
document.onmousemove=move;
//*** ***//
document.asdf.asdf1.value="left: "+obj.style.left;
document.asdf.asdf2.value="top: "+obj.style.top;
document.asdf.asdf3.value="width: "+obj.clip.width;
// returning false cancels the event (might not work)
return false;
}
function getParentWidth(p)
{
w = p.style.width;
// if this node uses % for width, get the parent's width
if( w.indexOf('%'))
return client.X;
if(w.type == "body")
return parseInt(w) * getWidth(p.parentNode) / 100;
if(w.type == "body")
return client.X;
// must not be percent, so use pixels
return parseInt(w);
}
/* move the object when the mouse moves
* e: the event (passed automatically)
*/
function move(e)
{
//this function should only be called when the object is moving,
//but here is a check anyway
if(moving)
{
//if event e exists use it, else us IE event
var ev = e? e : window.event;
//the actual move code. sets the objects left/top values to
// new ones based on the event's coordinates
obj.style.left= (ev.clientX - offsetX) + "px";
obj.style.top= (ev.clientY - offsetY) + "px";
}
//*** ***//
document.asdf.asdf1.value="left: "+obj.style.left;
document.asdf.asdf2.value="top: "+obj.style.top;
document.asdf.asdf3.value="x: "+ev.clientX;
document.asdf.asdf4.value="y: "+ev.clientY;
}
/* stops turns off dragging
* e: the event (handled automatically)
*/
function stopDrag(e)
{
var ev = e? e : window.event;
//turn off moving, turn off the listeners
moving = false;
document.onmouseup=null;
document.onmousemove=null;
//same propagation code as in startDrag
if(document.all)
{
ev.cancelBubble=false;
ev.returnValue=false;
}
else
{
ev.preventDefault();
ev.stopPropagation();
}
}
/* example use:
*/