rendered paste body<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0049)http://www.walterzorn.com/dragdrop/dragdrop_e.htm -->
<HTML><HEAD><TITLE>JavaScript: DHTML Library, Drag & Drop for Images and Layers</TITLE>
<META http-equiv=content-type content="text/html; charset=iso-8859-1">
<META http-equiv=imagetoolbar content=no><LINK
href="JavaScript DHTML Library, Drag & Drop for Images and Layers_files/newwalterzorn.css"
type=text/css rel=stylesheet>
<STYLE type=text/css>#reltab {
BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BACKGROUND: #d3e3f9; BORDER-LEFT: #000099 1px solid; BORDER-BOTTOM: #000099 1px solid; POSITION: relative; layer-background-color: #d3e3f9
}
#greylyr {
BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BACKGROUND: #eeeeee; LEFT: 6px; VISIBILITY: hidden; OVERFLOW: hidden; BORDER-LEFT: #000099 1px solid; WIDTH: 122px; BORDER-BOTTOM: #000099 1px solid; POSITION: absolute; TOP: 380px; layer-background-color: #eeeeee
}
#ingreylyr {
PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px
}
#bluelyr {
BORDER-RIGHT: #000099 1px solid; PADDING-RIGHT: 20px; BORDER-TOP: #000099 1px solid; PADDING-LEFT: 20px; BACKGROUND: #d3e3f9; LEFT: 0px; VISIBILITY: hidden; PADDING-BOTTOM: 20px; BORDER-LEFT: #000099 1px solid; WIDTH: 460px; PADDING-TOP: 20px; BORDER-BOTTOM: #000099 1px solid; POSITION: absolute; TOP: 2000px; layer-background-color: #d3e3f9
}
</STYLE>
<SCRIPT
src="JavaScript DHTML Library, Drag & Drop for Images and Layers_files/walterzorn.js"
type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
<!--
if (!document.layers)
{
document.write('<style type="text/css">#reldiv {position:relative;background-color:#ffffff;border:1px solid #000099;overflow:hidden;}'+
'#reldiv2 {position:relative;top:5px;background-color:#ffffff;border:1px solid #000099;overflow:hidden;}<\/style>');
}
//-->
</SCRIPT>
<META content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff>
<SCRIPT
src="JavaScript DHTML Library, Drag & Drop for Images and Layers_files/wz_dragdrop.js"
type=text/javascript></SCRIPT>
<A name=top></A>
<TABLE cellSpacing=0 cellPadding=0 width="99%">
<TBODY>
<TR>
<TD align=right><SMALL><!--a href="javascript:void(0)" onclick="dd.elements.cat.copies[dd.elements.cat.copies.length - 1].setHorizontal(!dd.elements.cat.copies[dd.elements.cat.copies.length - 1].horizontal);">Horz</a>
<a href="javascript:void(0)" onclick="dd.elements.cat.copies[dd.elements.cat.copies.length - 1].setVertical(!dd.elements.cat.copies[dd.elements.cat.copies.length - 1].vertical);">Vert</a--><!--a href="javascript:void(0)" onclick="dd.elements.cat.copy(2);">Cpy</a>
<a href="javascript:void(0)" onclick="dd.elements.cat.copies[0].del();">Del 0</a>
<a href="javascript:void(0)" onclick="for (var i = 0; i < dd.elements.length; i++) if (dd.elements[i].is_image) dd.elements[dd.n4? 'reldivn4' : 'reldiv'].addChild(dd.elements[i]);">-</a>
<a href="javascript:void(0)" onclick="while (dd.elements[dd.n4? 'reldivn4' : 'reldiv'].children.length) dd.elements[dd.n4? 'reldivn4' : 'reldiv']._removeChild(0); var rl = dd.elements.greylyr, r = dd.elements.rabbit; rl.addChild(r); for (var i = 0; i < r.copies.length; i++) rl.addChild(r.copies[i]);">-</a>
<a href="javascript:void(0)" onclick="var c = dd.elements.rabbit; c.moveTo(c.defx, c.defy); if (c.copies) for (var i = 0; i < c.copies.length; i++) c.copies[i].moveTo(c.copies[i].defx, c.copies[i].defy);">-</a--></SMALL></TD></TR></TBODY></TABLE>
<CENTER>
<DIV style="max-width: 800px">
<TABLE cellPadding=2>
<TBODY>
<TR align=left>
<TD>
<TABLE cellPadding=4 width="728" height="28">
<TBODY>
<TR>
<TD vAlign=top align=right rowSpan=3>
<TABLE cellSpacing=3 cellPadding=0 width=124>
<TBODY>
<TR>
<TD width=1 bgColor=#000099><IMG height=1
alt="JavaScript Drag and Drop for Layers and Images"
src="JavaScript DHTML Library, Drag & Drop for Images and Layers_files/transparentpixel.gif"
width=1 name=sepline1></TD>
<TD><SMALL> <BR>
<BR> </SMALL></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<p><BR>
</DIV></CENTER>
<DIV id=greylyr style="position: absolute; top: 0px; float: right;"><A name=demolyr></A>
<DIV id=ingreylyr>
<CENTER><IMG height=17 alt="Drag Drop JavaScript"
src="JavaScript DHTML Library, Drag & Drop for Images and Layers_files/button_outset.gif"
width=60 name=button></CENTER><BR><SMALL>wz_dragdrop.js provides extended DHTML
capabilities... <BR> <BR>...even for images nested into layers (DIV elements). <BR>
<BR>For example, just a few simple JavaScript lines are necessary to implement
the functionalities of this button. <BR> <BR><A
href="http://www.walterzorn.com/dragdrop/dragdrop_e.htm#flexlyr">Jump to another
demo-layer.</A><BR> <BR> </SMALL></DIV></DIV>
<DIV id=bluelyr><A name=flexlyr></A>
<CENTER>Check out if links in drag&drop layers work correctly. And if they
connect to the right locations even after the layers have been dragged around...
<SMALL><BR> <BR><A
href="http://www.walterzorn.com/dragdrop/dragdrop_e.htm#demolyr">Back to first
layer</A></SMALL> </CENTER></DIV>
<TABLE>
<TBODY>
<TR>
<TD height=150><BR></TD></TR></TBODY></TABLE>
<SCRIPT type=text/javascript>
<!--
SET_DHTML(CURSOR_MOVE, RESIZABLE, NO_ALT, SCROLL, "alligator", "bluelyr"+TRANSPARENT, "button"+VERTICAL+HORIZONTAL+CURSOR_DEFAULT, "cat"+TRANSPARENT, "chameleon", "counter", "greylyr"+TRANSPARENT, "koala", "leop", "low", "muckl"+TRANSPARENT+COPY+4, "prdog", "redarrow", "reldiv", "reldivn4", "reldiv2"+TRANSPARENT, "reldiv2n4"+TRANSPARENT, "reltab", "sepline1"+NO_DRAG, "slidercanvas", "smile1"+SCALABLE, "thumb"+HORIZONTAL+MAXOFFLEFT+45+MAXOFFRIGHT+45, "track"+NO_DRAG, "tryit", "upleft");
// Kreuzotter-vs-Uplefts Animation, demonstrating how to use the API of the DragDrop-Library
function ANIM()
{
if (!dd.obj || !dd.op6)
{
if (dd.elements.low.z <= dd.elements.upleft.z)
dd.elements.upleft.setZ(dd.elements.low.z - 1);
dd.elements.upleft.moveTo(
dd.elements.upleft.x <= -dd.elements.upleft.w?
iW - dd.elements.upleft.w - 20 :
(dd.elements.upleft.x - 3),
(dd.obj==dd.elements.upleft)?
dd.elements.upleft.y :
(dd.elements.low.y - dh)
);
dd.elements.low.moveTo(
dd.elements.low.x <= -dd.elements.low.w?
iW-dd.elements.low.w-20 :
(dd.elements.low.x-5),
dd.elements.upleft.y + dh
);
}
setTimeout("ANIM()", dd.kq? 200 : 100);
}
// override funcs defined within the Lib
function my_PickFunc()
{
if (dd.obj.name == 'button') dd.obj.swapImage(insetbutton.src);
if (!dd.obj.name.indexOf('muckl') && dd.obj.x == dd.obj.defx)
{
if (dd.elements.muckl.copies.length < 80) dd.elements.muckl.copy();
}
}
function my_DragFunc()
{
if (dd.obj.name == 'thumb')
{
var red = parseInt((dd.elements.thumb.x-dd.elements.thumb.defx)*255/45),
blue = -red,
green = (255-Math.abs(red)).toString(16);
red = (red > 0? red : 0).toString(16);
blue = (blue > 0? blue : 0).toString(16);
while (red.length < 2) red = '0'+red;
while (blue.length < 2) blue = '0'+blue;
while (green.length < 2) green = '0'+green;
dd.elements.slidercanvas.setBgColor("#"+red+green+blue);
}
}
function my_DropFunc()
{
if (dd.obj.name == 'button')
{
dd.obj.swapImage(outsetbutton.src);
var minh = dd.elements.button.h+((dd.elements.button.y-dd.elements.greylyr.y)<<1);
dd.elements.greylyr.resizeTo(
dd.elements.greylyr.w,
(dd.elements.greylyr.h != minh)? minh : 300
);
}
}
var outsetbutton = new Image();
outsetbutton.src = '../images/dragdrop/button_outset.gif';
var insetbutton = new Image();
insetbutton.src = '../images/dragdrop/button_inset.gif';
var iW = dd.getWndW(),
dh = dd.elements.upleft.h - dd.elements.low.h;
ANIM();
dd.elements.bluelyr.moveTo(
(iW-dd.elements.bluelyr.w)>>1,
dd.elements.counter.defy-dd.elements.bluelyr.h-30
);
dd.elements.greylyr.moveTo(dd.elements.sepline1.x-2, dd.elements.sepline1.y+110);
dd.elements.bluelyr.show();
dd.elements.greylyr.show();
dd.elements.thumb.moveTo(dd.elements.track.x+36, dd.elements.track.y);
dd.elements.thumb.setZ(dd.elements.track.z+1);
dd.elements.track.addChild('thumb');
dd.elements.thumb.defx = dd.elements.track.x+36;
//-->
</SCRIPT>
</BODY></HTML>