some issues but may give you a lead
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.design {
border:solid black 1px;text-Align:center;
}
.color {
border:solid black 1px;
}
/*]]>*/
</style><script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// By Vic Phillips (27-June-2007) http://www.vicsjavascripts.org.uk
var URL='http://www.vicsjavascripts.org.uk/StdImages/'
var DesignAry=[];
DesignAry[0]=['Design 1','design',50,50,100,200,URL+'One.gif'];
DesignAry[1]=['Design 2','design',50,260,100,200,URL+'Two.gif'];
DesignAry[2]=['Design 3','design',50,470,100,200,URL+'Three.gif'];
DesignAry[3]=['Design 4','design',50,680,100,200,URL+'Four.gif'];
DesignAry[4]=['Design 5','design',50,890,100,200,URL+'Five.gif'];
DesignAry[5]=['Design 6','design',50,1110,100,200,URL+'Six.gif'];
var ColorAry=[];
ColorAry[0]=['Color 1','#FFCCFF','color',550,50,100,200];
ColorAry[1]=['Color 2','#33CC66','color',550,260,100,200,URL+'Seven.gif'];
ColorAry[2]=['Color 3','#CC9966','color',550,470,100,200];
ColorAry[3]=['Color 4','#FF0066','color',550,680,100,200];
ColorAry[4]=['Color 5','#6633CC','color',550,890,100,200];
ColorAry[5]=['Color 6','#FFFF66','color',550,1110,100,200,URL+'Eight.gif'];
function zxcInit(zxcdary,zxcddock,zxccary,zxccdock){
var zxcbdy=document.getElementsByTagName('BODY')[0];
for (var zxc0=0;zxc0<zxcdary.length;zxc0++){
var zxcdiv=zxcES('DIV',{position:'absolute',overflow:'hidden',left:zxcdary[zxc0][2]+'px',top:zxcdary[zxc0][3]+'px',width:zxcdary[zxc0][4]+'px',height:zxcdary[zxc0][5]+'px',cursor:'move'},zxcbdy);
zxcdiv.className=zxcdary[zxc0][1];
var zxcimg=zxcES('IMAGE',{position:'absolute',left:'0px',top:'0px'},zxcdiv);
zxcimg.src=zxcdary[zxc0][6];
zxcES('DIV',{position:'absolute',left:'0px',top:'0px'},zxcdiv,zxcdary[zxc0][0]);
zxcAddEvt(zxcdiv,'zxcMseDown','mousedown');
zxcdiv.dock=[document.getElementById(zxcddock),zxccary[zxc0][0],document.getElementById(zxcddock+'IP')];
}
for (var zxc1=0;zxc1<zxccary.length;zxc1++){
var zxcdiv=zxcES('DIV',{position:'absolute',overflow:'hidden',left:zxccary[zxc1][3]+'px',top:zxccary[zxc1][4]+'px',width:zxccary[zxc1][5]+'px',height:zxccary[zxc1][6]+'px',backgroundColor:zxccary[zxc1][1],cursor:'move'},zxcbdy);
zxcdiv.className=zxccary[zxc1][2];
if (zxccary[zxc1][7]){
var zxcimg=zxcES('IMAGE',{position:'absolute',left:'0px',top:'0px'},zxcdiv);
zxcimg.src=zxccary[zxc1][7];
}
zxcES('DIV',{position:'absolute',left:'0px',top:'0px'},zxcdiv,zxccary[zxc1][0]);
zxcAddEvt(zxcdiv,'zxcMseDown','mousedown');
zxcdiv.dock=[document.getElementById(zxccdock),zxccary[zxc1][0],document.getElementById(zxccdock+'IP')];
}
zxcAddEvt(window,'zxcScroll','scroll');
}
function zxcScroll(){
zxcES(document.getElementById('Dock'),{top:(zxcWWHS()[3]+100)+'px'});
}
function zxcMseDown(zxcevt){
if (!this.cancel){
zxcDragObj=[this.cloneNode(true),zxcMse(zxcevt)[0]-zxcPos(this)[0],zxcMse(zxcevt)[1]-zxcPos(this)[1],this.offsetWidth,this.offsetHeight];
zxcDragObj[0].cancel=true;
zxcDragObj[0].dock=this.dock;
document.getElementsByTagName('BODY')[0].appendChild(zxcDragObj[0]);
}
}
function zxcMseUp(event){
if (zxcDragObj!=null){
if (zxcPos(zxcDragObj[0])[0]>zxcPos(zxcDragObj[0].dock[0])[0]-5&&zxcPos(zxcDragObj[0])[0]<zxcPos(zxcDragObj[0].dock[0])[0]+5&&zxcPos(zxcDragObj[0])[1]>zxcPos(zxcDragObj[0].dock[0])[1]-5&&zxcPos(zxcDragObj[0])[1]<zxcPos(zxcDragObj[0].dock[0])[1]+5){
if (zxcDragObj[0].dock[0].childNodes[0]) zxcDragObj[0].dock[0].removeChild(zxcDragObj[0].dock[0].childNodes[0]);
zxcDragObj[0].dock[0].appendChild(zxcDragObj[0]);
zxcES(zxcDragObj[0],{left:'0px',top:'0px',border:'solid black 0px'});
zxcDragObj[0].dock[2].value=zxcDragObj[0].dock[1];
}
else {zxcDragObj[0].parentNode.removeChild(zxcDragObj[0]); }
zxcDragObj=null;
}
}
function zxcDrag(zxcevt){
if (zxcDragObj){
zxcES(zxcDragObj[0],{left:(zxcMse(zxcevt)[0]-zxcDragObj[1])+'px',top:(zxcMse(zxcevt)[1]-zxcDragObj[2])+'px'});
}
}
function zxcMse(zxcevt){
if(!zxcevt) var zxcevt=window.event;
if (document.all) return [zxcevt.clientX+zxcDocS()[0],zxcevt.clientY+zxcDocS()[1]];
return [zxcevt.pageX,zxcevt.pageY];
}
var zxcEvt=0;zxcDragObj=null;
function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxcp){ zxcp.appendChild(zxcele); }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}
function zxcPos(zxcobj){
zxclft=zxcobj.offsetLeft;
zxctop=zxcobj.offsetTop;
while(zxcobj.offsetParent!=null){
zxcpar=zxcobj.offsetParent;
zxclft+=zxcpar.offsetLeft;
zxctop+=zxcpar.offsetTop;
zxcobj=zxcpar;
}
return [zxclft,zxctop];
}
function zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTo p];
}
function zxcDocS(){
if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.scrollLeft,document.body.scrollTop];
}
function zxcEventAdd(zxco,zxct,zxcf) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}
function zxcAddEvent(zxc,zxcfun,zxcevt){
if (zxc.addEvent){ return; }
zxc.addEvent=window[zxcfun];
zxcEventAdd(zxc,zxcevt,'addEvent');
}
function zxcAddEvt(zxc,zxcfun,zxcevt){
zxc['zxcaddEvt'+zxcEvt]=window[zxcfun];
zxcEventAdd(zxc,zxcevt,'zxcaddEvt'+zxcEvt);
zxcEvt++;
}
zxcAddEvt(document,'zxcMseUp','mouseup');
zxcAddEvt(document,'zxcDrag','mousemove');
/*]]>*/
</script>
</head>
<body onload="zxcInit(DesignAry,'DesignDock',ColorAry,'ColorDock');" >
<form name="Form" >
<div id="Dock" style="position:absolute;left:200px;top:100px;width:310px;height:400px;border:solid black 1px;" >
<input type="text" name="DesignDockIP" id="DesignDockIP" />
<input type="text" name="ColorDockIP" id="ColorDockIP" />
<div id="DesignDock" style="position:absolute;left:50px;top:50px;width:100px;height:200px;border:solid black 1px;" ></div>
<div id="ColorDock" style="position:absolute;left:160px;top:50px;width:100px;height:200px;border:solid black 1px;" ></div>
</form>
</div>
</div>
http://www.webdeveloper.com/forum/showthread.php?t=152689
</body>
</html>