DIR : /home/kozerus/public_html/cropex/js/wz/wz_dragdrop.html
/home/kozerus/public_html/cropex/js/wz
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<meta http-equiv="imagetoolbar" content="no">
<title>JavaScript: DHTML Library, Drag & Drop for Images and Layers</title>
<link rel="stylesheet" type="text/css" href="/js/wz/newwalterzorn.css">
<style type="text/css">
<!--
#reltab {
position:relative;
border:1px solid #000099;
background:#d3e3f9;
layer-background-color:#d3e3f9;
}
#greylyr {
position:absolute;
left:6px;
top:380px;
width:122px;
border:1px solid #000099;
background:#eeeeee;
layer-background-color:#eeeeee;
overflow:hidden;
visibility:hidden;
}
#ingreylyr {
padding:3px;
}
#bluelyr {
position:absolute;
visibility:hidden;
left:0px;
top:2000px;
width:460px;
padding:20px;
border:1px solid #000099;
background:#d3e3f9;
layer-background-color:#d3e3f9;
visibility:hidden;
}
-->
</style>
<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><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>
</head>
<body bgcolor=linen>
<h1>/js/wz/wz_dragdrop</h1>
<hr color=black>
<a id=href_koeye_handhither name=href_koeye_handhither href=/imgs/btn/koeye_handhither.gif target=_blank>
<img id=img_koeye_handhither name=img_koeye_handhither src=/imgs/btn/koeye_handhither.gif height=100 border=0>
</a>
<script type="text/javascript" src="/js/wz/wz_dragdrop.js"></script>
<a name="top"> </a>
<table width="98%" cellspacing="0" cellpadding="0">
<tbody><tr>
<td>
<a href="http://www.walterzorn.de/dragdrop/dragdrop.htm" target="_top">
<img src="/js/wz/germany.gif" alt="German version" width="22" height="15" border="0" align="middle">
</a>
<small><a href="http://www.walterzorn.de/dragdrop/dragdrop.htm" target="_top">German version</a></small>
</td>
<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>
<table>
<tbody><tr>
<td id="op56check" align="center"><a href="http://walterzorn.de/en/index.htm"><img name="logo" src="/js/wz/logo.gif" alt="Home" width="278" height="30" border="0"></a></td>
</tr>
</tbody></table>
<table cellspacing="12">
<tbody><tr>
<td><a href="http://walterzorn.de/en/index.htm">Home</a></td>
<td><a href="http://walterzorn.de/en/jsgraphics/jsgraphics_e.htm">VectorGraphics-Library</a></td>
<td><a href="http://walterzorn.de/en/tooltip/tooltip_e.htm">Tooltips</a></td>
<td><a href="http://walterzorn.de/en/grapher/grapher_e.htm">Function-Grapher</a></td>
</tr>
</tbody></table>
<br>
</center>
<center>
<table cellpadding="4">
<tbody><tr align="left">
<td valign="top" align="right">
<img src="/js/wz/transparentpixel.gif" alt="DHTML JavaScript Drag and Drop for Layers and Images" width="1" height="30">
<br>
<img src="/js/wz/transparentpixel.gif" alt="DHTML JavaScript Drag and Drop for Layers and Images" width="20" height="1">
<img name="cat" src="/js/wz/wz_ddcat.jpg" alt="DragnDrop Image" style="visibility: hidden;" width="129" height="154">
<br> <br> <br>
<table cellspacing="3" cellpadding="0">
<tbody><tr>
<td>
<br>
<br> <br>
</td>
<td width="1" bgcolor="#000099"><img src="/js/wz/transparentpixel.gif" alt="JavaScript Drag and Drop for Layers and Images" width="1" height="1"></td>
</tr>
</tbody></table>
</td>
<td>
<table cellpadding="4">
<tbody><tr>
<td>
<big><b>JavaScript: DHTML API,<br>
Drag & Drop for Images and Layers</b></big><br>
<small>JavaScript Library. Developer: Walter Zorn</small>
</td>
<td rowspan="4" valign="top" align="right">
<br> <br>
<table width="130" cellspacing="3" cellpadding="0">
<tbody><tr>
<td width="1" bgcolor="#000099"><img name="sepline1" src="/js/wz/transparentpixel.gif" alt="JavaScript Drag and Drop for Layers and Images" style="visibility: hidden;" width="1" height="1"></td>
<td>
<small>
<br>
<a href="#browser">Cross Browser</a>
<br> <br>
<a href="#config">How to include</a>
<br> <br>
<a href="#addons">DHTML API</a>
<br> <br>
<a href="#download">Download</a>
<br>
</small>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td>
A<sup> </sup>Cross-browser JavaScript DHTML Library
which adds Drag Drop functionality and extended DHTML capabilities to
layers and to any desired image, even those integrated into the text <img name="smile1" src="/js/wz/smile.gif" alt="Drag & Drop Image" style="visibility: hidden;" width="11" height="11"> flow.
<div id="reldiv" style="width: 1215px; height: 16px; top: 0px; left: 0px; z-index: 0; cursor: move;"><ilayer name="reldivn4" bgcolor="#eeeeee"><div>
To convert images or layers into draggable DHTML
items, simply pass their names/IDs to the library's main function
'SET_DHTML()'.
</div></ilayer></div>
Optional <a href="http://walterzorn.de/en/dragdrop/commands_e.htm">commands</a>
allow to change and customize the behaviour of Drag&Drop items in
multiple ways.
For example, you can limit how far a drag&drop item
can be moved, specify the cursor, or multiply drag'ndrop images.
The DHTML API of this DHTML
Drag&Drop JavaScript is easily understandable.
It provides methods to <a class="code" href="javascript:void(0)" onclick=";if(window.dd && dd.elements){dd.elements.cat.maximizeZ();dd.elements.cat.moveTo(dd.elements.cat.x+20, dd.elements.cat.y+20);}return false;">moveTo()</a>,
<a class="code" href="javascript:void(0)" onclick=";if(window.dd && dd.elements){dd.elements.cat.maximizeZ();dd.elements.cat.resizeTo((dd.elements.cat.w > 195)? 129 : 258, (dd.elements.cat.h > 221)? 154 : 308);}return false;">resizeTo()</a>,
<a class="code" href="javascript:void(0);" onclick=";if(window.dd && dd.elements)dd.elements.cat.hide();return false;">hide()</a> and
<a class="code" href="javascript:void(0);" onclick=";if(window.dd && dd.elements) dd.elements.cat.show();return false;">show()</a> again drag n' drop elements,
or to <a class="code" href="javascript:void(0)" onclick="if (window.dd && dd.elements) dd.elements.cat.copy();">copy()</a> images right within the textflow of your page dynamically,
and <a class="code" href="javascript:void(0)" onclick=";if(window.dd && dd.elements){var reldiv = dd.n4? dd.elements.reldivn4 : dd.elements.reldiv; reldiv.setBgColor((reldiv.bgColor == '#d3e6ff')? '#ffcccc' : (reldiv.bgColor == '#ffcccc')? '#cceecc' : (reldiv.bgColor == '#cceecc')? (dd.n4? '#eeeeee' : '#ffffff') : '#d3e6ff');}">much</a>
more.
Each DHTML item has properties such as x, y, w, h, z,
defx, defy, defw, defh, defz (co-ordinates, size, z-index, and their
initial default values, respectively) plus multiple others,
which you can read whenever desired.
For instance, to store the current position of a
drag&drop item, you might write its x and y properties into a
<input type="hidden"> form element, from where you could
transmit them to the server.
For more details, see the <a href="http://walterzorn.de/en/dragdrop/api_e.htm">DHTML API</a> and <a href="http://walterzorn.de/en/dragdrop/commands_e.htm">commands</a> reference.
<br>
<div id="reldiv2" style="width: 1215px; height: 33px; top: 5px; left: 0px; z-index: 0; cursor: move;"><ilayer name="reldiv2n4" bgcolor="#eeeeee"><div>
The idea behind wz_dragdrop.js was not merely to drag around some layers or images on a page in IE only,
but also to be a cross-browser clientside API for interactive webpages and webbased applications.
</div></ilayer></div>
</td>
</tr>
<tr>
<td>
<big> <br> <br> <br> <br><b>Resize Instead of Drag?</b></big>
<br>
This functionality can be easily activated by passing to SET_DHTML() the
<a href="#addons">command</a>
RESIZABLE, or SCALABLE to preserve the width/height ratio of the element.
These commands may be applied, at your option, either to certain or to all of the drag drop elements.
By the way, on these pages the RESIZABLE functionality has been activated globally.
<br clear="all">
<img name="bikegoeteborg" src="/js/wz/northcapetrip_goeteborg.jpg" alt="On my first bicycle trip to Northcape" title="On my first bicycle trip to Northcape" style="visibility: hidden;" width="426" height="444" border="0" align="left">
<br clear="all">
<small><i>On my 8 megameters bicycle trip through Norway, Northern-Finland and Sweden<br>(Hamburg-Northcape-Kirkenes-Trelleborg-Munich)</i></small>
</td>
</tr>
<tr>
<td>
<big> <br> <br><a name="browser"> </a> <br> <br><b>Cross-Browser Functionality</b></big>
<br>
Allmost all browsers (see the following list), except of
a few rarely used ones, should be able to interpret this
DHTML Drag 'n Drop JavaScript.
<br> <br>
<img name="leop" src="/js/wz/ddleop.jpg" alt="" style="visibility: hidden;" width="300" hspace="4" height="205" align="right">
Linux:<br>
Browsers based on the Gecko-engine (Mozilla,
Netscape 6+, Galeon...), Konqueror 3.2+, Netscape 4,
Opera 5+.
<br> <br>
Windows:<br>
Gecko browsers (Mozilla, Netscape 6+, Phoenix...),
Netscape 4, Opera 5, 6 and 7, Internet Explorer 4+.
<br> <br>
Other Systems:<br>
Mac Safari works fine.
Assuming that their behavior is essentially the same as
with their Linux and Windows counterparts, I've given Gecko browsers,
Netscape 4 and Opera 5+ unlimited access to execute the
Drag and Drop JavaScript.
</td>
</tr>
<tr>
<td>
<big> <br> <br> <br> <br><b>Window Resize Events</b></big>
<br>
wz_dragdrop.js automatically re-integrates images and
relatively positioned layers into the logical structure of the page.
That is, back into the page flow even if line-breaks,
table-sizes etc. have changed.
Items that have previously been dragged keep their
relative offset from their - also recalculated - default location within
the page flow (accessible, by the way, through the defx and defy
properties of each item).
That means: A user won't break the API if they decide to
resize their browser window.
<br>
<img name="skitour" src="/js/wz/skitour_suedtirol_2.jpg" alt="" style="visibility: hidden;" width="550" height="298">
<br>
<small><i>Ski touring in South Tyrol</i></small>
</td>
<td rowspan="1" align="right">
<table width="130" cellspacing="3" cellpadding="0">
<tbody><tr>
<td width="1" bgcolor="#000099"><img src="/js/wz/transparentpixel.gif" alt="DHTML Drag & Drop JavaScript for Images and Layers" width="1" height="1"></td>
<td>
<small>
<br>
<a href="#top">Top of page</a>
<br> <br>
<a href="#browser">Cross Browser</a>
<br> <br>
<a href="#config">How to include</a>
<br> <br>
<a href="#addons">DHTML API</a>
<br> <br>
<a href="#download">Download</a>
<br>
</small>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td>
<big> <br> <br><a name="config"> </a> <br> <br><b>How to include the Drag & Drop Script</b></big>
<br>
<b><big>1.</big> HTML File: Names for Drag&Drop elements</b>
<br>
<b>Images:</b>
Each of the images to be set draggable requires a unique name, as for instance:
<img name="chameleon" src="/js/wz/wz_ddcham.jpg" alt="JavaScript, DHTML: Drag&Drop Images" style="visibility: hidden;" width="155" height="95" align="left">
<img name="name1" src="someImg.jpg" width="240" height="135"><br>
Width and height attributes are mandatory and should be
absolute numbers like width="240", rather than relative ones like width="33%".
<b>Layers:</b>
Each one requires a unique ID and, contrary to images, must be positioned relatively or absolutely:<br>
<div id="name2" style="position:absolute;...">Content</div>.
</td>
<td rowspan="5" align="right">
<table width="130" cellspacing="3" cellpadding="0">
<tbody><tr>
<td width="1" bgcolor="#000099"><img src="/js/wz/transparentpixel.gif" alt="" width="1" height="1"></td>
<td>
<small>
<br>
<a href="#top">Top of page</a>
<br> <br>
<a href="#browser">Cross Browser</a>
<br> <br>
<a href="#config">How to include</a>
<br> <br>
<a href="#addons">DHTML API</a>
<br> <br>
<a href="#download">Download</a>
<br>
</small>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td>
<b> <br><big>2.</big> Insert pieces of code into HTML file</b>
<br>
Insert the following lines inside the <body> section of your html file.
<br>
This one immediately <b style="color:red">after (not before!!!) the opening <body> tag</b>:
</td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#000099">
<tbody><tr>
<td>
<table width="100%" cellspacing="1" cellpadding="1" border="0">
<tbody><tr>
<td bgcolor="#eeeeee">
<tt><font style="font-size:12px;" size="2">
<script type="text/javascript" src="wz_dragdrop.js"></script>
</font></tt>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td>
And this one directly before the closing </body> tag:
</td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#000099">
<tbody><tr>
<td>
<table width="100%" cellspacing="1" cellpadding="1" border="0">
<tbody><tr>
<td bgcolor="#eeeeee">
<tt><font style="font-size:12px;" size="2">
<script type="text/javascript"><br>
<!--<br>
<br>
SET_DHTML("name1", "name2", "anotherLayer", "lastImage");<br>
<br>
//--><br>
</script>
</font></tt>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td>
As evident from this example, simply the names of the
drag-drop elements must be passed to SET_DHTML( ), each in quotation
marks and with commas separated from each other.
Sequence of names may be arbitrary.
</td>
<td rowspan="3" align="right">
<table width="130" cellspacing="3" cellpadding="0">
<tbody><tr>
<td width="1" bgcolor="#000099"><img src="/js/wz/transparentpixel.gif" alt="" width="1" height="1"></td>
<td>
<small>
<br>
<a href="#top">Top of page</a>
<br> <br>
<a href="#browser">Cross Browser</a>
<br> <br>
<a href="#config">How to include</a>
<br> <br>
<a href="#addons">DHTML API</a>
<br> <br>
<a href="#download">Download</a>
<br>
</small>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td>
<table width="265" cellspacing="0" cellpadding="0" border="0" align="right">
<tbody><tr>
<td><img name="northcape" src="/js/wz/nothcapetrip2_northcape.jpg" alt="On my second bicycle trip to the Northcape" title="On my second bicycle trip to the Northcape" style="visibility: hidden;" width="265" height="410" border="0" align="right"></td>
</tr>
<tr>
<td><small><i>At the Northcape, on my second Scandinavia bicycle trip</i></small></td>
</tr>
</tbody></table>
<br> <br>
<b><big>3.</big> Save script file</b>
<br>
<a href="#download">Download the JavaScript Drag Drop library</a>,
unzipp it and save it as wz_dragdrop.js into the same directory as the
html file.
Or adapt the path src="wz_dragdrop.js" within the above
code piece if you prefer to save the library to a different directory.
<br> <br> <br><b><big>4.</big>Save transparent 1x1 pixel GIF</b>
<br>
transparentpixel.gif, coming with the download file
wz_dragdrop.zip, is required by Netscape 4 to create spacers at the
default places of the drag drop images.
transparentpixel.gif should be saved into the same
directory as the html file.
<br clear="all">
<br> <br> <br><b><big>5.</big> Doesn't work?</b>
<br>
<a name="notwork"> </a>Then everything should function. If not:
<br>
<b>a)</b> Check the HTML and CSS syntax of your page, preferably with the W3C-Online-Validator on <a href="http://validator.w3.org/" target="_blank">http://validator.w3.org/</a>.
<br>
<b>b)</b> Make sure that you've carefully followed <a href="#config">steps 1. through 4</a> (by far the most frequent reason for problems).
<br>
<b>c)</b>
Check your own JavaScript code for logical errors and
syntax errors, the latter e.g. by looking at your browser's JavaScript
error console.
<br>
<b>d)</b>
Occasionally, problems arise with XHTML DTD pages, since
the XHTML specification - annoyingly - doesn't permit document.write().
Then it's inevitable to switch your page to another DTD,
preferably HTML4.01.
<br>
<b>Don't claim you've found a bug</b> - unless you have everything checked carefully and you're very sure.
Feedback is anyway welcome.
</td>
</tr>
<tr>
<td>
<big> <br><a name="addons"> </a> <br>
<img name="slidercanvas" src="/js/wz/transparent_300_120.gif" alt="" style="visibility: hidden;" width="300" height="120" align="right">
<br> <br> <br> <br>
<b>DHTML API</b></big>
<br>
<b>Clone or multiply an image?</b>
<br>
<img name="muckl" src="/js/wz/muckl.jpg" alt="Drag Drop Image" style="visibility: hidden;" width="100" height="130" align="left">
Or change the cursor?
<img name="thumb" src="/js/wz/sliderthumb.gif" alt="" style="visibility: hidden;" width="22" height="35" align="right">
<img name="track" src="/js/wz/track.gif" alt="" style="visibility: hidden; display: none !important;" width="94" hidden="" height="35" align="right">
Or convert an image into a slider with stops?
There are several commands available which change, if
passed to SET_DHTML(), the behavior of JavaScript Drag n' Drop items.
<br> <br>
<center>
<a class="code" href="javascript:void(0)" onclick="var muckl; if (window.dd && dd.elements) (muckl = dd.elements.muckl).swapImage((muckl.src != muckl.defsrc)? '../images/dragdrop/muckl.jpg' : '../images/dragdrop/rex.jpg', true); return false;">swapImage()</a>
</center>
<b>Scripting Drag Drop Elements</b>
<br>
For example, reading the current coordinates of a
certain drag-drop item and then calling its moveTo() method offers an
easy way to animate images and layers.
Moreover, you may even convert a simple web page, just
containing a few images, into a graphical user interface application,
working with the coordinates of the elements (as demonstated with the
slider example above)...
The DHTML Drag Drop Library provides an
easily understandable, user-friendly interface to the properties and
methods of the drag-drop elements.
Using this library as DHTML API you haven't to bother
with browser or DOM detection - all this is performed by the library.
For instance, the line
<br>
<tt>dd.elements.image2.moveTo(300, 200);</tt>
<br>
would reliably move "image2" to the absolute coordinates
(300, 200) in any browser that can interpret the library,
as reliably as the expression <tt>dd.elements.image2.x</tt> will retrieve the current X coordinate of the image.
<br>
<!--
<img name="low" src="/js/wz/low.gif" alt="Drag&Drop Image" style="visibility: hidden;" width="62" height="25">
<img name="upleft" src="/js/wz/upleft.gif" alt="Drag & Drop Image" style="visibility: hidden;" width="97" height="41">
-->
<hr color=black>
<hr color=white>
<img name="low" src="/imgs/btn/kop1234.png" alt="Drag&Drop Image" style="visibility: hidden;" width="62" height="25">
<img name=upleft src=/imgs/btn/kob.png alt="upleft low" style="visibility: hidden;" height=25>
<hr color=white>
<hr color=black>
<br>
<table>
<tbody><tr>
<td>
</td>
<td>
<big><a href="http://walterzorn.de/en/dragdrop/commands_e.htm">Optional Commands</a>:</big> Demonstration and Reference
</td>
</tr>
<tr>
<td>
</td>
<td>
<big><a href="http://walterzorn.de/en/dragdrop/api_e.htm">DHTML API, Scripting Drag Drop Items</a>:</big> Demo and Reference
</td>
</tr>
<tr>
<td>
</td>
<td>
<big><a href="http://walterzorn.de/en/dragdrop/demos/demos.htm">Examples</a></big> using the DHTML API<a name="download"> </a>
</td>
</tr>
<tr>
<td>
</td>
<td>
<big><a href="http://walterzorn.de/en/dragdrop/history_e.htm">History of Updates</a></big> (read this if you aren't sure about the benefits from an update)
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr align="left">
<td align="right">
<table cellspacing="3" cellpadding="0">
<tbody><tr>
<td>
<br>
<br> <br>
</td>
<td width="1" bgcolor="#000099"><img src="/js/wz/transparentpixel.gif" alt="JavaScript Drag and Drop for Layers and Images" width="1" height="1"></td>
</tr>
</tbody></table>
</td>
<td>
<table cellpadding="4">
<tbody><tr>
<td>
<br> <br> <br> <br>
<img name="koala" src="/js/wz/ddkoala.jpg" alt="Drag&Drop Image" style="visibility: hidden;" width="160" height="213" align="right">
<b> <br> <br>
<img name="redarrow" src="/js/wz/redarrow.gif" alt="" style="visibility: hidden;" width="15" height="13" align="middle"><big>Download</big></b>
<br>
wz_dragdrop.js 4.91, published under the <b>LGPL</b>:<br>
<a style="text-decoration:underline;" href="http://walterzorn.de/en/scripts/wz_dragdrop.zip">wz_dragdrop.zip</a> (12 KB)
<br clear="all"> <br> <br> <br>
<br>
<br clear="all">
<br>
<br>
<div id="reltab" style="width: 1215px; height: 239px; top: 0px; left: 0px; z-index: 0; cursor: move;">
<table>
<tbody><tr>
<td bgcolor="#d3e3f9">
<b>Attention:</b>
<br> <br>
<b>1.)</b> If you use wz_dragdrop.js for
applications or for extended scripting, and are going to upgrade from a
version prior to ver. 3.4, please consider:
With version 3.4 the array that contains the
drag drop elements has been renamed from <tt><b>dd.element</b></tt> to <tt><b>dd.elements</b></tt> .
You must change your code accordingly in case you've used any <tt><b>dd.element</b></tt> statement (see also <a href="http://walterzorn.de/en/dragdrop/api_e.htm">Scripting Drag Drop elements, DHTML API</a>).
<br> <br>
<b>2.)</b> With version 4.0, the library has been renamed from dragdrop.js to <b>wz_dragdrop.js</b>.
<br> <br>
<b>3.)</b> With version 4.2, the method <tt><b>activate()</b></tt> has been renamed to <tt><b>maximizeZ()</b></tt>.
<br> <br>
<b>4.)</b> With version 4.31, the command <tt><b>MULTIPLY</b></tt> has been renamed to <tt><b>COPY</b></tt>, and its usage has been changed as follows:
To create 12 copies of an image named "imageName", you must write <tt><b>"imageName"+COPY+12</b></tt> instead of <tt><b>"imageName"+MULTIPLY12</b></tt>
<br> <br>
<b>5.)</b> With version 4.41, <b>SET_DRAGGABLE()</b> has been renamed to <b>SET_DHTML()</b> and <b>ADD_DRAGGABLE()</b> to <b>ADD_DHTML()</b>.
</td>
</tr>
</tbody></table>
</div>
</td>
<td rowspan="1" valign="bottom" align="right">
<table width="130" cellspacing="3" cellpadding="0">
<tbody><tr>
<td width="1" bgcolor="#000099"><img src="/js/wz/transparentpixel.gif" alt="" width="1" height="1"></td>
<td>
<small>
<br>
<a href="#top">Top of page</a>
<br> <br>
<a href="#browser">Cross Browser</a>
<br> <br>
<a href="#config">How to include</a>
<br> <br>
<a href="#addons">DHTML API</a>
<br> <br>
<a href="#download">Download</a>
<br>
</small>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<br> <br>
<hr width="95%" size="1" noshade="noshade">
<table cellpadding="20">
<tbody><tr>
<td>
<small>Walter Zorn, Munich
<br><a href="http://www.kreuzotter.de/impressum.htm">Impressum / about this page</a></small>
<br>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
</td></tr>
</tbody></table>
</center>
<div id="greylyr" style="width: 122px; height: 305px; top: 337px; left: 1399px; z-index: 0; cursor: move; visibility: visible;">
<a name="demolyr"> </a>
<div id="ingreylyr">
<center><img name="button" src="/js/wz/button_outset.gif" alt="Drag Drop JavaScript" style="visibility: hidden;" width="60" height="17"></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="#flexlyr">Jump to another demo-layer.</a><br> <br>
</small>
</div>
</div>
<div id="bluelyr" style="width: 460px; height: 77px; top: -149px; left: 519px; z-index: 0; cursor: move; visibility: visible;">
<a name="flexlyr"> </a>
<center>
Check out if links in drag&drop layers work correctly.
And if they connect to their targets correctly, even after the layers have been dragged around...
<small><br> <br><a href="#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, "bikegoeteborg"+TRANSPARENT, "bluelyr"+TRANSPARENT, "button"+VERTICAL+HORIZONTAL+CURSOR_DEFAULT, "cat"+TRANSPARENT, "chameleon", "counter", "greylyr"+TRANSPARENT, "koala", "leop", "low", "muckl"+TRANSPARENT+COPY+4, "northcape"+TRANSPARENT, "redarrow", "reldiv", "reldivn4", "reldiv2"+TRANSPARENT, "reldiv2n4"+TRANSPARENT, "reltab", "sepline1"+NO_DRAG, "skitour"+TRANSPARENT, "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><div id="upleftdIi15v" style="position: absolute; left: 1123px; top: 3361px; width: 97px; height: 41px; z-index: 0; cursor: move;"><img name="upleftdIi15vNI1m6G" src="/js/wz/upleft.gif" width="97" height="41"></div><div id="tryitdIi15v" style="position: absolute; left: 320px; top: 469px; width: 50px; height: 17px; z-index: 1; cursor: move;"><img name="tryitdIi15vNI1m6G" src="/js/wz/tryit.gif" width="50" height="17"></div><div id="trackdIi15v" style="position: absolute; left: 0px; top: 0px; width: 94px; height: 35px; z-index: 1; cursor: auto;"><img name="trackdIi15vNI1m6G" src="/js/wz/track.gif" style="display: none !important;" width="94" hidden="" height="35"></div><div id="thumbdIi15v" style="position: absolute; left: 36px; top: 0px; width: 22px; height: 35px; z-index: 3; cursor: move;"><img name="thumbdIi15vNI1m6G" src="/js/wz/sliderthumb.gif" width="22" height="35"></div><div id="smile1dIi15v" style="position: absolute; left: 1317px; top: 200px; width: 11px; height: 11px; z-index: 1; cursor: move;"><img name="smile1dIi15vNI1m6G" src="/js/wz/smile.gif" width="11" height="11"></div><div id="slidercanvasdIi15v" style="position: absolute; left: 1088px; top: 3041px; width: 300px; height: 120px; z-index: 1; cursor: move;"><img name="slidercanvasdIi15vNI1m6G" src="/js/wz/transparent_300_120.gif" width="300" height="120"></div><div id="skitourdIi15v" style="position: absolute; left: 171px; top: 1517px; width: 550px; height: 298px; z-index: 1; cursor: move;"><img name="skitourdIi15vNI1m6G" src="/js/wz/skitour_suedtirol_2.jpg" width="550" height="298"></div><div id="sepline1dIi15v" style="position: absolute; left: 1401px; top: 227px; width: 1px; height: 1px; z-index: 1; cursor: auto;"><img name="sepline1dIi15vNI1m6G" src="/js/wz/transparentpixel.gif" width="1" height="1"></div><div id="redarrowdIi15v" style="position: absolute; left: 171px; top: 3637px; width: 15px; height: 13px; z-index: 1; cursor: move;"><img name="redarrowdIi15vNI1m6G" src="/js/wz/redarrow.gif" width="15" height="13"></div><div id="northcapedIi15v" style="position: absolute; left: 1123px; top: 2364px; width: 265px; height: 410px; z-index: 1; cursor: move;"><img name="northcapedIi15vNI1m6G" src="/js/wz/nothcapetrip2_northcape.jpg" width="265" height="410"></div><div id="muckldIi15v" style="position: absolute; left: 171px; top: 3166px; width: 100px; height: 130px; z-index: 1; cursor: move;"><img name="muckldIi15vNI1m6G" src="/js/wz/muckl.jpg" width="100" height="130"></div><div id="muckl1dIi15v" style="position: absolute; left: 171px; top: 3166px; width: 100px; height: 130px; z-index: 2; cursor: move;"><img name="muckl1dIi15vNI1m6G" src="/js/wz/muckl.jpg" width="100" height="130"></div><div id="muckl2dIi15v" style="position: absolute; left: 171px; top: 3166px; width: 100px; height: 130px; z-index: 3; cursor: move;"><img name="muckl2dIi15vNI1m6G" src="/js/wz/muckl.jpg" width="100" height="130"></div><div id="muckl3dIi15v" style="position: absolute; left: 171px; top: 3166px; width: 100px; height: 130px; z-index: 4; cursor: move;"><img name="muckl3dIi15vNI1m6G" src="/js/wz/muckl.jpg" width="100" height="130"></div><div id="muckl4dIi15v" style="position: absolute; left: 171px; top: 3166px; width: 100px; height: 130px; z-index: 5; cursor: move;"><img name="muckl4dIi15vNI1m6G" src="/js/wz/muckl.jpg" width="100" height="130"></div><div id="lowdIi15v" style="position: absolute; left: 643px; top: 3377px; width: 62px; height: 25px; z-index: 1; cursor: move;"><img name="lowdIi15vNI1m6G" src="/js/wz/low.gif" width="62" height="25"></div><div id="leopdIi15v" style="position: absolute; left: 1084px; top: 1145px; width: 300px; height: 205px; z-index: 1; cursor: move;"><img name="leopdIi15vNI1m6G" src="/js/wz/ddleop.jpg" width="300" height="205"></div><div id="koaladIi15v" style="position: absolute; left: 1228px; top: 3594px; width: 160px; height: 213px; z-index: 1; cursor: move;"><img name="koaladIi15vNI1m6G" src="/js/wz/ddkoala.jpg" width="160" height="213"></div><div id="chameleondIi15v" style="position: absolute; left: 171px; top: 1969px; width: 155px; height: 95px; z-index: 1; cursor: move;"><img name="chameleondIi15vNI1m6G" src="/js/wz/ddcham.jpg" width="155" height="95"></div><div id="catdIi15v" style="position: absolute; left: 26px; top: 152px; width: 129px; height: 154px; z-index: 1; cursor: move;"><img name="catdIi15vNI1m6G" src="/js/wz/ddcat.jpg" width="129" height="154"></div><div id="buttondIi15v" style="position: absolute; left: 1430px; top: 340px; width: 60px; height: 17px; z-index: 1; cursor: default; visibility: visible;"><img name="buttondIi15vNI1m6G" src="/js/wz/button_outset.gif" width="60" height="17"></div><div id="bikegoeteborgdIi15v" style="position: absolute; left: 171px; top: 522px; width: 426px; height: 444px; z-index: 1; cursor: move;"><img name="bikegoeteborgdIi15vNI1m6G" src="/js/wz/northcapetrip_goeteborg.jpg" width="426" height="444"></div>
</body></html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer