Hi all,

I hope you are able to help me out. I have a a page (see code below, I have compressed it to 2 images) where I want to let the user drag and drop images to anywhere on the page (I have achieved this.)

What I want to be able to do is allow the user to dock 2 images together.
In the example below the 2 images are horizontal lines. What I want the user to be able to do is move the images together and dock them so that they form one horizontal line.
When the user moves one of the pictures both will move and stay docked.

my initial idea was that when the user selects "dock" I somehow move both images into a div and make the div dragable, that way both images move together. Then if the user selects "undock" both images are removed from the div and become draggable again.

I hope this makes sense.

Can anyone help?


[CODE]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>drag, Drop and dock</title>
<style type="text/css">
.drag {
border: 1px solid black;
background-color: rgb(240, 240, 240);
position: relative;
padding: 0.5em;
margin: 0 0 0.5em 1.5em;
cursor: move;
}
</style>

<script language="JavaScript" type="text/javascript">
<!--

// this is simply a shortcut for the eyes and fingers
function $(id)
{
return document.getElementById(id);
}

var _startX = 0; // mouse starting positions
var _startY = 0;
var _offsetX = 0; // current element offset
var _offsetY = 0;
var _dragElement; // needs to be passed from OnMouseDown to OnMouseMove
var _oldZIndex = 0; // we temporarily increase the z-index during drag

InitDragDrop();

function InitDragDrop()
{
document.onmousedown = OnMouseDown;
document.onmouseup = OnMouseUp;
}

function OnMouseDown(e)
{
// IE is retarded and doesn't pass the event object
if (e == null)
e = window.event;

// IE uses srcElement, others use target
var target = e.target != null ? e.target : e.srcElement;

// for IE, left click == 1
// for Firefox, left click == 0
if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'drag')
{
// grab the mouse position
_startX = e.clientX;
_startY = e.clientY;

// grab the clicked element's position
_offsetX = ExtractNumber(target.style.left);
_offsetY = ExtractNumber(target.style.top);

// bring the clicked element to the front while it is being dragged
_oldZIndex = target.style.zIndex;
target.style.zIndex = 10000;

// we need to access the element in OnMouseMove
_dragElement = target;

// tell our code to start moving the element with the mouse
document.onmousemove = OnMouseMove;

// cancel out any text selections
document.body.focus();

// prevent text selection in IE
document.onselectstart = function () { return false; };

// prevent IE from trying to drag an image
target.ondragstart = function() { return false; };

// prevent text selection (except IE)
return false;
}
}

function ExtractNumber(value)
{
var n = parseInt(value);
return n == null || isNaN(n) ? 0 : n;
}

function OnMouseMove(e)
{
if (e == null)
var e = window.event;

// this is the actual "drag code"
_dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
_dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';

}

function OnMouseUp(e)
{
if (_dragElement != null)
{
_dragElement.style.zIndex = _oldZIndex;

// we're done with these events until the next OnMouseDown
document.onmousemove = null;
document.onselectstart = null;
_dragElement.ondragstart = null;

// this is how we know we're not dragging
_dragElement = null;

}
}
//-->
</script>
</head>

<body>

<img class="drag" src="Horizontal_Line.png" alt="A horizontal line" />
<img class="drag" src="Horizontal_Line.png" alt="Another horizontal line" />

</body>
</html>

[CODE]