DIR : /home/kozerus/public_html/wz/wz_frame_2.htm
/home/kozerus/public_html/wz
<!DOCTYPE html>
<html><head>
<span id="line2"></span></span><span><<span class="start-tag">html</span>></span><span>
<span id="line3"></span></span><span><<span class="start-tag">head</span>></span><span>
<span id="line4"></span></span><span><<span class="start-tag">meta</span> <span class="attribute-name">http-equiv</span>="<a class="attribute-value">expires</a>" <span class="attribute-name">content</span>="<a class="attribute-value">0</a>"></span><span>
<span id="line5"></span></span><span><<span class="start-tag">meta</span> <span class="attribute-name">http-equiv</span>="<a class="attribute-value">content-type</a>" <span class="attribute-name">content</span>="<a class="attribute-value">text/html; charset=iso-8859-1</a>"></span><span>
<span id="line6"></span></span><span><<span class="start-tag">META</span> <span class="attribute-name">HTTP-EQUIV</span>="<a class="attribute-value">imagetoolbar</a>" <span class="attribute-name">CONTENT</span>="<a class="attribute-value">no</a>"></span><span>
<span id="line7"></span></span><span><<span class="start-tag">title</span>></span><span>Drag<span class="entity"><span>&</span>amp;</span>Drop for Images and Layers: Interface of the JavaScript Library</span><span></<span class="end-tag">title</span>></span><span>
<span id="line8"></span></span><span><<span class="start-tag">link</span> <span class="attribute-name">rel</span>="<a class="attribute-value">stylesheet</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text/css</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/newwalterzorn.css">../newwalterzorn.css</a>"></span><span>
<span id="line9"></span></span><span></<span class="end-tag">head</span>></span><span>
<span id="line10"></span></span><span><<span class="start-tag">body</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line11"></span></span><span><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/scripts/wz_dragdrop.js">../scripts/wz_dragdrop.js</a>"></span><span></span><span></<span class="end-tag">script</span>></span><span>
<span id="line12"></span></span><span><<span class="start-tag">a</span> <span class="attribute-name">name</span>="<a class="attribute-value">top</a>"></span><span> </span><span></<span class="end-tag">a</span>></span><span>
<span id="line13"></span></span><span><<span class="start-tag">form</span> <span class="attribute-name">action</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/dragdrop/api_e.htm"></a>"></span><span>
<span id="line14"></span> </span><span><<span class="start-tag">center</span>></span><span>
<span id="line15"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">cellpadding</span>="<a class="attribute-value">6</a>"></span><span>
<span id="line16"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line17"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">center</a>"></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/index.htm">../index.htm</a>"></span><span></span><span><<span class="start-tag">img</span> <span class="attribute-name">name</span>="<a class="attribute-value">logo</a>" <span class="attribute-name">border</span>="<a class="attribute-value">0</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/images/logo.gif">../images/logo.gif</a>" <span class="attribute-name">alt</span>="<a class="attribute-value">Home</a>" <span class="attribute-name">width</span>="<a class="attribute-value">278</a>" <span class="attribute-name">height</span>="<a class="attribute-value">30</a>"></span><span></span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line18"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line19"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line20"></span> </span><span><<span class="start-tag">table</span>></span><span>
<span id="line21"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line22"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line23"></span> <span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line24"></span> </span><span><<span class="start-tag">b</span>></span><span></span><span><<span class="start-tag">big</span>></span><span>
<span id="line25"></span> <span class="entity"><span>&</span>middot;</span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/dragdrop/dragdrop_e.htm">dragdrop_e.htm</a>"></span><span>Main Page: Drag<span class="entity"><span>&</span>amp;</span>Drop, DHTML for Images and Layers</span><span></<span class="end-tag">a</span>></span><span>
<span id="line26"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line27"></span> <span class="entity"><span>&</span>middot;</span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/dragdrop/commands_e.htm">commands_e.htm</a>"></span><span>Optional Commands</span><span></<span class="end-tag">a</span>></span><span>
<span id="line28"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line29"></span> <span class="entity"><span>&</span>middot;</span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/dragdrop/demos/demos.htm">demos/demos.htm</a>"></span><span>Demos</span><span></<span class="end-tag">a</span>></span><span>
<span id="line30"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line31"></span> <span class="entity"><span>&</span>middot;</span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/dragdrop/history_e.htm">history_e.htm</a>" <span class="attribute-name">target</span>="<a class="attribute-value">_top</a>"></span><span>History of Updates</span><span></<span class="end-tag">a</span>></span><span>
<span id="line32"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line33"></span> <span class="entity"><span>&</span>middot;</span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/dragdrop/dragdrop_e.htm#download">dragdrop_e.htm#download</a>"></span><span>Download</span><span></<span class="end-tag">a</span>></span><span>
<span id="line34"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span>
<span id="line35"></span> </span><span></<span class="end-tag">big</span>></span><span></span><span></<span class="end-tag">b</span>></span><span>
<span id="line36"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line37"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line38"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line39"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line40"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">760</a>"></span><span>
<span id="line41"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line42"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line43"></span> </span><span><<span class="start-tag">table</span>></span><span>
<span id="line44"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line45"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line46"></span> </span><span><<span class="start-tag">b</span>></span><span></span><span><<span class="start-tag">big</span>></span><span>Reference: Access to Drag <span class="entity"><span>&</span>amp;</span> Drop Elements with JavaScript</span><span></<span class="end-tag">big</span>></span><span></span><span></<span class="end-tag">b</span>></span><span>
<span id="line47"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">img</span> <span class="attribute-name">name</span>="<a class="attribute-value">low</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/images/dragdrop/low_dragme.gif">../images/dragdrop/low_dragme.gif</a>" <span class="attribute-name">alt</span>="<a class="attribute-value">Drag<span class="entity"><span>&</span>amp;</span>Drop Image</a>" <span class="attribute-name">width</span>="<a class="attribute-value">119</a>" <span class="attribute-name">height</span>="<a class="attribute-value">25</a>"></span><span></span><span><<span class="start-tag">img</span> <span class="attribute-name">name</span>="<a class="attribute-value">upleft</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/images/dragdrop/upleft.gif">../images/dragdrop/upleft.gif</a>" <span class="attribute-name">alt</span>="<a class="attribute-value">Drag and Drop Image</a>" <span class="attribute-name">width</span>="<a class="attribute-value">97</a>" <span class="attribute-name">height</span>="<a class="attribute-value">41</a>"></span><span>
<span id="line48"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line49"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line50"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line51"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line52"></span> For external scripting of drag drop elements, it's urgently recommended to use the methods and properties provided by this library.
<span id="line53"></span> Otherwise conflicts between the internally managed data and the externally changed reality may arise.
<span id="line54"></span> For instance, don't try to resize drag drop elements using your own size-setting code;
<span id="line55"></span> use the API's (much more convenient) </span><span><<span class="start-tag">tt</span>></span><span>resizeTo()</span><span></<span class="end-tag">tt</span>></span><span> or </span><span><<span class="start-tag">tt</span>></span><span>resizeBy()</span><span></<span class="end-tag">tt</span>></span><span> methods instead.
<span id="line56"></span> Or, to retrieve the current width of an item, the statement </span><span><<span class="start-tag">tt</span>></span><span>dd.elements.ElementName.w</span><span></<span class="end-tag">tt</span>></span><span> will certainly be much more convenient and reliable than any other attempt.
<span id="line57"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line58"></span> </span><span><<span class="start-tag">b</span>></span><span>Reference to a certain drag drop item</span><span></<span class="end-tag">b</span>></span><span>
<span id="line59"></span> (<span class="entity"><span>&</span>quot;</span>NameOfElement<span class="entity"><span>&</span>quot;</span> is the name, if item is an image, or ID, if item is a layer, you've passed to SET_DHTML). See </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/dragdrop/dragdrop_e.htm">dragdrop_e.htm</a>"></span><span>main page</span><span></<span class="end-tag">a</span>></span><span>):
<span id="line60"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line61"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.elements[<span class="entity"><span>&</span>quot;</span>NameOfElement<span class="entity"><span>&</span>quot;</span>]<span class="entity"><span>&</span>nbsp;</span></span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line62"></span> or
<span id="line63"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.elements.NameOfElement</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line64"></span> or
<span id="line65"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.elements[i]</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line66"></span> (index of item in the array of drag drop elements)
<span id="line67"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line68"></span> </span><span><<span class="start-tag">b</span>></span><span>A property of an item:</span><span></<span class="end-tag">b</span>></span><span>
<span id="line69"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line70"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.elements.NameOfElement.property</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span> or
<span id="line71"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line72"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.elements[<span class="entity"><span>&</span>quot;</span>NameOfElement<span class="entity"><span>&</span>quot;</span>].property</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line73"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line74"></span> </span><span><<span class="start-tag">b</span>></span><span>Invoke a method of an item:</span><span></<span class="end-tag">b</span>></span><span>
<span id="line75"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line76"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.elements.NameOfElement.method()</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span> or
<span id="line77"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line78"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.elements[<span class="entity"><span>&</span>quot;</span>NameOfElement<span class="entity"><span>&</span>quot;</span>].method()</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line79"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line80"></span> Properties/methods in grey letters are intended for advanced usage only - ignore them if they appear confusing.
<span id="line81"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line82"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line83"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line84"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line85"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#000099</a>" <span class="attribute-name">border</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span>
<span id="line86"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line87"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line88"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">border</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">7</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">1</a>"></span><span>
<span id="line89"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span>
<span id="line90"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">colspan</span>="<a class="attribute-value">2</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#eeeeee</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>Properties of the drag <span class="entity"><span>&</span>amp;</span> drop elements</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line91"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line92"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line93"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">colspan</span>="<a class="attribute-value">2</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#eeeeee</a>"></span><span>Data type, [r] read-only, [rw] read and write</span><span></<span class="end-tag">td</span>></span><span>
<span id="line94"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line95"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line96"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span></span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span></span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>h<span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">img</span> <span class="attribute-name">align</span>="<a class="attribute-value">top</a>" <span class="attribute-name">name</span>="<a class="attribute-value">rex</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/images/dragdrop/rex.jpg">../images/dragdrop/rex.jpg</a>" <span class="attribute-name">width</span>="<a class="attribute-value">100</a>" <span class="attribute-name">height</span>="<a class="attribute-value">128</a>" <span class="attribute-name">alt</span>="<a class="attribute-value">Drag <span class="entity"><span>&</span>amp;</span> Drop</a>"></span><span></span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span></span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>number [r]</span><span></<span class="end-tag">td</span>></span><span></span><span></<span class="end-tag">tr</span>></span><span></span><span></<span class="end-tag">table</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line97"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line98"></span> Current height.
<span id="line99"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line100"></span> A complete example line how to use a property: </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) alert(dd.elements.rex.h);return false;</a>"></span><span>alert(dd.elements.rex.h);</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line101"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line102"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line103"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line104"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span></span><span><<span class="start-tag">tr</span>></span><span></span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>name</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span></span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>string [r]</span><span></<span class="end-tag">td</span>></span><span></span><span></<span class="end-tag">tr</span>></span><span></span><span></<span class="end-tag">table</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line105"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line106"></span> Retrieves the name (images) or ID (layers) which has been passed to </span><span><<span class="start-tag">tt</span>></span><span>SET_DHTML()</span><span></<span class="end-tag">tt</span>></span><span>.
<span id="line107"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line108"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) alert(dd.elements.rex.name);return false;</a>"></span><span>alert(dd.elements.rex.name);</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line109"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line110"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line111"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line112"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span></span><span><<span class="start-tag">tr</span>></span><span></span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>w</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span></span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>number [r]</span><span></<span class="end-tag">td</span>></span><span></span><span></<span class="end-tag">tr</span>></span><span></span><span></<span class="end-tag">table</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line113"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line114"></span> Current width of image/layer.
<span id="line115"></span> Use </span><span><<span class="start-tag">tt</span>></span><span>resizeTo()</span><span></<span class="end-tag">tt</span>></span><span> or </span><span><<span class="start-tag">tt</span>></span><span>resizeBy()</span><span></<span class="end-tag">tt</span>></span><span> to alter the size.
<span id="line116"></span> <span class="entity"><span>&</span>nbsp;</span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) alert(dd.elements['rex'].w);return false;</a>"></span><span>alert(dd.elements['rex'].w);</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line117"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line118"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line119"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line120"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span></span><span><<span class="start-tag">tr</span>></span><span></span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>x</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span></span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>number [r]</span><span></<span class="end-tag">td</span>></span><span></span><span></<span class="end-tag">tr</span>></span><span></span><span></<span class="end-tag">table</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line121"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line122"></span> Current X position inside the document.
<span id="line123"></span> x and y are related to the left top corner of the document/page.
<span id="line124"></span> Use </span><span><<span class="start-tag">tt</span>></span><span>moveTo()</span><span></<span class="end-tag">tt</span>></span><span> or </span><span><<span class="start-tag">tt</span>></span><span>moveBy()</span><span></<span class="end-tag">tt</span>></span><span> to change the element's position.
<span id="line125"></span> <span class="entity"><span>&</span>nbsp;</span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) alert(dd.elements.rex.x);return false;</a>"></span><span>alert(dd.elements.rex.x);</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line126"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line127"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line128"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line129"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span></span><span><<span class="start-tag">tr</span>></span><span></span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>y</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span></span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>number [r]</span><span></<span class="end-tag">td</span>></span><span></span><span></<span class="end-tag">tr</span>></span><span></span><span></<span class="end-tag">table</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line130"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line131"></span> Current Y position.
<span id="line132"></span> <span class="entity"><span>&</span>nbsp;</span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) alert(dd.elements['rex'].y);return false;</a>"></span><span>alert(dd.elements[<span class="entity"><span>&</span>quot;</span>rex<span class="entity"><span>&</span>quot;</span>].y);</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line133"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line134"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line135"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line136"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span></span><span><<span class="start-tag">tr</span>></span><span></span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>bgColor</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span></span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>string [r]</span><span></<span class="end-tag">td</span>></span><span></span><span></<span class="end-tag">tr</span>></span><span></span><span></<span class="end-tag">table</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line137"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line138"></span> Current background color of a layer.
<span id="line139"></span> Use the method </span><span><<span class="start-tag">tt</span>></span><span>setBgColor()</span><span></<span class="end-tag">tt</span>></span><span> to change the color.
<span id="line140"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line141"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line142"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line143"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line144"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span></span><span><<span class="start-tag">tr</span>></span><span></span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>children</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span></span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>object array [r]</span><span></<span class="end-tag">td</span>></span><span></span><span></<span class="end-tag">tr</span>></span><span></span><span></<span class="end-tag">table</span>></span><span>
<span id="line145"></span> </span><span><<span class="start-tag">img</span> <span class="attribute-name">name</span>="<a class="attribute-value">buoy1</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/images/transparentpixel.gif">../images/transparentpixel.gif</a>" <span class="attribute-name">width</span>="<a class="attribute-value">1</a>" <span class="attribute-name">height</span>="<a class="attribute-value">1</a>" <span class="attribute-name">alt</span>="<a class="attribute-value"></a>"></span><span>
<span id="line146"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line147"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line148"></span> Contains references to the dhtml <span class="entity"><span>&</span>amp;</span> drag<span class="entity"><span>&</span>amp;</span>drop enabled children of the element, usually images (=<span class="entity"><span>&</span>nbsp;</span>children) nested via HTML into a layer (=<span class="entity"><span>&</span>nbsp;</span>parent element).
<span id="line149"></span> Note that the </span><span><<span class="start-tag">tt</span>></span><span>addChild()</span><span></<span class="end-tag">tt</span>></span><span> method allows arbitrary items to be added to the </span><span><<span class="start-tag">tt</span>></span><span>children</span><span></<span class="end-tag">tt</span>></span><span> array, i.e. to be handled as if they were nested into the element.
<span id="line150"></span> Children automatically follow their parent's drag operations, </span><span><<span class="start-tag">tt</span>></span><span>moveTo()</span><span></<span class="end-tag">tt</span>></span><span>,</span><span><<span class="start-tag">tt</span>></span><span> moveBy()</span><span></<span class="end-tag">tt</span>></span><span>, </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements)dd.elements.greylyr.hide();</a>"></span><span>hide()</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>, <span class="entity"><span>&</span>nbsp;</span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements)dd.elements.greylyr.show();</a>"></span><span>show()</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span> and </span><span><<span class="start-tag">tt</span>></span><span>maximizeZ()</span><span></<span class="end-tag">tt</span>></span><span> methods,
<span id="line151"></span> provided that neither the </span><span><<span class="start-tag">tt</span>></span><span>DETACH_CHILDREN</span><span></<span class="end-tag">tt</span>></span><span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/dragdrop/commands_e.htm">commands_e.htm</a>"></span><span>command</span><span></<span class="end-tag">a</span>></span><span> nor the </span><span><<span class="start-tag">tt</span>></span><span>.detachChild()</span><span></<span class="end-tag">tt</span>></span><span> method has been applied to the parent.
<span id="line152"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line153"></span> Examples for feasible statements:
<span id="line154"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line155"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.elements.layerName.children[i]</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span> or
<span id="line156"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line157"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.elements.layerName.children[<span class="entity"><span>&</span>quot;</span>imageName<span class="entity"><span>&</span>quot;</span>]</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span> or
<span id="line158"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.elements[<span class="entity"><span>&</span>quot;</span>layerName<span class="entity"><span>&</span>quot;</span>].children.imageName</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span> and so forth.
<span id="line159"></span> </span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.elements.layerName.children.length</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span> retrieves the number of images contained within the layer.
<span id="line160"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line161"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line162"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line163"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line164"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span></span><span><<span class="start-tag">tr</span>></span><span></span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>copies</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span></span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>object array [r]</span><span></<span class="end-tag">td</span>></span><span></span><span></<span class="end-tag">tr</span>></span><span></span><span></<span class="end-tag">table</span>></span><span>
<span id="line165"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line166"></span> </span><span><<span class="start-tag">img</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>" <span class="attribute-name">name</span>="<a class="attribute-value">muckl</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/images/dragdrop/muckl.jpg">../images/dragdrop/muckl.jpg</a>" <span class="attribute-name">width</span>="<a class="attribute-value">100</a>" <span class="attribute-name">height</span>="<a class="attribute-value">130</a>" <span class="attribute-name">alt</span>="<a class="attribute-value"></a>"></span><span>
<span id="line167"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line168"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line169"></span> This array contains the copies of a drag drop image which has been multiplied by the </span><span><<span class="start-tag">tt</span>></span><span>COPY</span><span></<span class="end-tag">tt</span>></span><span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/dragdrop/commands_e.htm">commands_e.htm</a>"></span><span>command</span><span></<span class="end-tag">a</span>></span><span> or the </span><span><<span class="start-tag">tt</span>></span><span>copy()</span><span></<span class="end-tag">tt</span>></span><span> method.
<span id="line170"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line171"></span> With </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.elements.imgName.copies[i]</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span> you'll get a reference to copy number i of <span class="entity"><span>&</span>quot;</span>imgName<span class="entity"><span>&</span>quot;</span> (first copy has the index 0, as usual with arrays).
<span id="line172"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line173"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.elements.imgName.copies.length</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span> retrieves the number of copies.
<span id="line174"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line175"></span> Being a fully-equipped drag drop image by its own, each of the copies internally gets its own name,
<span id="line176"></span> which is the name of the original image with a number appended, beginning with 1 for the first copy.
<span id="line177"></span> Therefore </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.elements.imgName.copies[3]</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span> is also accessible via </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.elements.imgName4</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>.
<span id="line178"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line179"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">;if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) {var i = document.forms[0].I.value, w = document.forms[0].W.value, h = document.forms[0].H.value; dd.elements.muckl.copies[i].resizeTo(w, h);}</a>"></span><span>dd.elements.muckl.copies[</span><span></<span class="end-tag">a</span>></span><span></span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">I</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">2</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">1</a>" <span class="attribute-name">value</span>="<a class="attribute-value">3</a>"></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">;if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) {var i = document.forms[0].I.value, w = document.forms[0].W.value, h = document.forms[0].H.value; dd.elements.muckl.copies[i].resizeTo(w, h);}</a>"></span><span>].resizeTo(</span><span></<span class="end-tag">a</span>></span><span></span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">W</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">4</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">3</a>" <span class="attribute-name">value</span>="<a class="attribute-value">200</a>"></span><span>,</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">H</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">4</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">3</a>" <span class="attribute-name">value</span>="<a class="attribute-value">260</a>"></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">;if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) {var i = document.forms[0].I.value, w = document.forms[0].W.value, h = document.forms[0].H.value; dd.elements.muckl.copies[i].resizeTo(w, h);}</a>"></span><span>);</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line180"></span> </span><span><<span class="start-tag">br</span>></span><span>Hint ;-) : Original size was (100, 130)
<span id="line181"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line182"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line183"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line184"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span></span><span><<span class="start-tag">tr</span>></span><span></span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>defh</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span></span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>number [r]</span><span></<span class="end-tag">td</span>></span><span></span><span></<span class="end-tag">tr</span>></span><span></span><span></<span class="end-tag">table</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line185"></span> </span><span><<span class="start-tag">td</span>></span><span>Initial (default) height.</span><span></<span class="end-tag">td</span>></span><span>
<span id="line186"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line187"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line188"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span></span><span><<span class="start-tag">tr</span>></span><span></span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>defsrc</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span></span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>string [r]</span><span></<span class="end-tag">td</span>></span><span></span><span></<span class="end-tag">tr</span>></span><span></span><span></<span class="end-tag">table</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line189"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line190"></span> For images only. This property contains the default URL (initial path) even after the image has been swapped.
<span id="line191"></span> For example, you might write
<span id="line192"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line193"></span> </span><span><<span class="start-tag">tt</span>></span><span>dd.elements.myImg.swapImage(dd.elements.myImg.defsrc);</span><span></<span class="end-tag">tt</span>></span><span>
<span id="line194"></span> </span><span><<span class="start-tag">br</span>></span><span>to restore the original source of <span class="entity"><span>&</span>quot;</span>myImg<span class="entity"><span>&</span>quot;</span>.
<span id="line195"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line196"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line197"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line198"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span></span><span><<span class="start-tag">tr</span>></span><span></span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>defw</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span></span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>number [r]</span><span></<span class="end-tag">td</span>></span><span></span><span></<span class="end-tag">tr</span>></span><span></span><span></<span class="end-tag">table</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line199"></span> </span><span><<span class="start-tag">td</span>></span><span>Initial (default) width.</span><span></<span class="end-tag">td</span>></span><span>
<span id="line200"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line201"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line202"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span></span><span><<span class="start-tag">tr</span>></span><span></span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>defx</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span></span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>number [r]</span><span></<span class="end-tag">td</span>></span><span></span><span></<span class="end-tag">tr</span>></span><span></span><span></<span class="end-tag">table</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line203"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line204"></span> Default X position.
<span id="line205"></span> The library uses these default co-ordinates to re-integrate images or relatively positioned layers into the logical structure of the page/text flow after the window or a layer has been resized.
<span id="line206"></span> You might read these default co-ordinates to find out where a dragged item actually belongs to.
<span id="line207"></span> Example how to move an item to its default position:
<span id="line208"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line209"></span> </span><span><<span class="start-tag">tt</span>></span><span>var my_item = dd.elements[<span class="entity"><span>&</span>quot;</span>itemName<span class="entity"><span>&</span>quot;</span>];
<span id="line210"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line211"></span> my_item.moveTo(my_item.defx,<span class="entity"><span>&</span>nbsp;</span>my_item.defy);</span><span></<span class="end-tag">tt</span>></span><span>
<span id="line212"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line213"></span> Note: defx and defy of a child element (see children) change according to the movements of its parent element.
<span id="line214"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line215"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line216"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line217"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span></span><span><<span class="start-tag">tr</span>></span><span></span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>defy</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span></span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>number [r]</span><span></<span class="end-tag">td</span>></span><span></span><span></<span class="end-tag">tr</span>></span><span></span><span></<span class="end-tag">table</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line218"></span> </span><span><<span class="start-tag">td</span>></span><span>Original (default) Y position.</span><span></<span class="end-tag">td</span>></span><span>
<span id="line219"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line220"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line221"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span></span><span><<span class="start-tag">tr</span>></span><span></span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>defz</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span></span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>number [rw]</span><span></<span class="end-tag">td</span>></span><span></span><span></<span class="end-tag">tr</span>></span><span></span><span></<span class="end-tag">table</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line222"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line223"></span> Original (default) z-index.
<span id="line224"></span> Used by the library to restore the z-index of an element to which the RESET_Z </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/dragdrop/commands_e.htm">commands_e.htm</a>"></span><span>command</span><span></<span class="end-tag">a</span>></span><span> has been applied.
<span id="line225"></span> You might modify the default stacking order of your Drag<span class="entity"><span>&</span>amp;</span>Drop elements by changing their </span><span><<span class="start-tag">tt</span>></span><span>defz</span><span></<span class="end-tag">tt</span>></span><span> values.
<span id="line226"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line227"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line228"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line229"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span></span><span><<span class="start-tag">tr</span>></span><span></span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>div</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span></span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>object [r]</span><span></<span class="end-tag">td</span>></span><span></span><span></<span class="end-tag">tr</span>></span><span></span><span></<span class="end-tag">table</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line230"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line231"></span> Direct reference to the DOM node of the item.
<span id="line232"></span> Increases the flexibility of the API essentially.
<span id="line233"></span> Example:
<span id="line234"></span> </span><span><<span class="start-tag">tt</span>></span><span>dd.elements.someName.div.ondblclick<span class="entity"><span>&</span>nbsp;</span>=<span class="entity"><span>&</span>nbsp;</span>myDblClickFunc;</span><span></<span class="end-tag">tt</span>></span><span>
<span id="line235"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line236"></span> This example shows how to assign a doubleclick eventhandler to a DHTML<span class="entity"><span>&</span>nbsp;</span><span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>nbsp;</span>Drag<span class="entity"><span>&</span>amp;</span>Drop element.
<span id="line237"></span> Please recall, however, that you should never directly change properties which are managed and accessible through the API of wz_dragdrop.js, such as position, z-index or size!
<span id="line238"></span> For example, do not write dd.elements.someName.div.width<span class="entity"><span>&</span>nbsp;</span>=<span class="entity"><span>&</span>nbsp;</span>314px;. Use resizeTo() instead.
<span id="line239"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line240"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line241"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line242"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span></span><span><<span class="start-tag">tr</span>></span><span></span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>horizontal</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span></span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>boolean [r]</span><span></<span class="end-tag">td</span>></span><span></span><span></<span class="end-tag">tr</span>></span><span></span><span></<span class="end-tag">table</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line243"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line244"></span> Indicates whether the item can be dragged horizontally only.
<span id="line245"></span> To toggle this movement restriction, you can either apply the HORIZONTAL </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/dragdrop/commands_e.htm">commands_e.htm</a>"></span><span>command</span><span></<span class="end-tag">a</span>></span><span>,
<span id="line246"></span> or invoke the </span><span><<span class="start-tag">tt</span>></span><span>setHorizontal()</span><span></<span class="end-tag">tt</span>></span><span> method.
<span id="line247"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line248"></span> (See also </span><span><<span class="start-tag">tt</span>></span><span>vertical</span><span></<span class="end-tag">tt</span>></span><span>.)
<span id="line249"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line250"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line251"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line252"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span></span><span><<span class="start-tag">tr</span>></span><span></span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>index</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span></span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>number [r]</span><span></<span class="end-tag">td</span>></span><span></span><span></<span class="end-tag">tr</span>></span><span></span><span></<span class="end-tag">table</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line253"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line254"></span> Index of item within the </span><span><<span class="start-tag">tt</span>></span><span>dd.elements</span><span></<span class="end-tag">tt</span>></span><span> array.
<span id="line255"></span> Useful, for example, to map the draggable items directly on an array of formular inputs:
<span id="line256"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line257"></span> </span><span><<span class="start-tag">tt</span>></span><span>document.myForm.elements[dd.obj.</span><span><<span class="start-tag">b</span>></span><span>index</span><span></<span class="end-tag">b</span>></span><span>].value = dd.obj.x;</span><span></<span class="end-tag">tt</span>></span><span>
<span id="line258"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line259"></span> </span><span><<span class="start-tag">tt</span>></span><span>dd.obj</span><span></<span class="end-tag">tt</span>></span><span> is a reference to the currently active item, see further down this page:
<span id="line260"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line261"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line262"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line263"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span></span><span><<span class="start-tag">tr</span>></span><span></span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>is_image</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span></span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>boolean [r]</span><span></<span class="end-tag">td</span>></span><span></span><span></<span class="end-tag">tr</span>></span><span></span><span></<span class="end-tag">table</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line264"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line265"></span> </span><span><<span class="start-tag">tt</span>></span><span>true</span><span></<span class="end-tag">tt</span>></span><span>, if element is an image, </span><span><<span class="start-tag">tt</span>></span><span>false</span><span></<span class="end-tag">tt</span>></span><span> if it's a layer.
<span id="line266"></span> Example:
<span id="line267"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line268"></span> </span><span><<span class="start-tag">tt</span>></span><span>if (dd.elements[3].is_image)</span><span><<span class="start-tag">br</span>></span><span>
<span id="line269"></span> {</span><span><<span class="start-tag">br</span>></span><span>
<span id="line270"></span> <span class="entity"><span>&</span>nbsp;</span> <span class="entity"><span>&</span>nbsp;</span> dd.elements[3].swapImage('images/anotherImg.jpg');</span><span><<span class="start-tag">br</span>></span><span>
<span id="line271"></span> }</span><span></<span class="end-tag">tt</span>></span><span>
<span id="line272"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line273"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line274"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line275"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span></span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span></span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>maxoffl,</span><span><<span class="start-tag">br</span>></span><span>maxofft,</span><span><<span class="start-tag">br</span>></span><span>maxoffr,</span><span><<span class="start-tag">br</span>></span><span>maxoffb</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span></span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>number [rw]</span><span></<span class="end-tag">td</span>></span><span></span><span></<span class="end-tag">tr</span>></span><span></span><span></<span class="end-tag">table</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line276"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line277"></span> These properties reflect the values of the MAXOFFLEFT/MAXOFFTOP/MAXOFFRIGHT/MAXOFFBOTTOM-</span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/dragdrop/commands_e.htm">commands_e.htm</a>"></span><span>commands</span><span></<span class="end-tag">a</span>></span><span>,
<span id="line278"></span> that is they limit how far the element can be dragged away from its default position.
<span id="line279"></span> Being writable (rw), these properties can directly be set or changed at runtime.
<span id="line280"></span> A value of -1 means unlimited drag range.
<span id="line281"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line282"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line283"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line284"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span></span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>"></span><span></span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>maxw, maxh,</span><span><<span class="start-tag">br</span>></span><span>minw, minh</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span></span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>number [rw]</span><span></<span class="end-tag">td</span>></span><span></span><span></<span class="end-tag">tr</span>></span><span></span><span></<span class="end-tag">table</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line285"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line286"></span> Reflecting the values of the MAXWIDTH/MAXHEIGHT/MINWIDTH/MINHEIGHT-</span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/dragdrop/commands_e.htm">commands_e.htm</a>"></span><span>commands</span><span></<span class="end-tag">a</span>></span><span>,
<span id="line287"></span> these properties limit how far the element can be resized with the mouse.
<span id="line288"></span> Only relevant for elements the RESIZABLE command has been applied to.
<span id="line289"></span> Being writable (rw), these properties can directly be set or changed at runtime.
<span id="line290"></span> A value of -1 means unlimited resizability.
<span id="line291"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line292"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line293"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line294"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span></span><span><<span class="start-tag">tr</span>></span><span></span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>original</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span></span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>object [r]</span><span></<span class="end-tag">td</span>></span><span></span><span></<span class="end-tag">tr</span>></span><span></span><span></<span class="end-tag">table</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line295"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line296"></span> Exists only with images which are copies.
<span id="line297"></span> This property is a reference to the original, i.e. the drag<span class="entity"><span>&</span>amp;</span>drop image from which the copy has been derived.
<span id="line298"></span> Example:
<span id="line299"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line300"></span> </span><span><<span class="start-tag">tt</span>></span><span>
<span id="line301"></span> if (dd.obj.original)</span><span><<span class="start-tag">br</span>></span><span>
<span id="line302"></span> {</span><span><<span class="start-tag">br</span>></span><span>
<span id="line303"></span> <span class="entity"><span>&</span>nbsp;</span> <span class="entity"><span>&</span>nbsp;</span> dd.obj.original.swapImage('images/anotherImg.jpg');</span><span><<span class="start-tag">br</span>></span><span>
<span id="line304"></span> }</span><span></<span class="end-tag">tt</span>></span><span>
<span id="line305"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line306"></span> By looking for the property </span><span><<span class="start-tag">tt</span>></span><span>original</span><span></<span class="end-tag">tt</span>></span><span>, these lines examine if the currently dragged element (</span><span><<span class="start-tag">tt</span>></span><span>dd.obj</span><span></<span class="end-tag">tt</span>></span><span>) is a copy.
<span id="line307"></span> If yes, its original image (</span><span><<span class="start-tag">tt</span>></span><span>original</span><span></<span class="end-tag">tt</span>></span><span>) is swapped.
<span id="line308"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line309"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line310"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line311"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span></span><span><<span class="start-tag">tr</span>></span><span></span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>parent</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span></span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>object [r]</span><span></<span class="end-tag">td</span>></span><span></span><span></<span class="end-tag">tr</span>></span><span></span><span></<span class="end-tag">table</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line312"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line313"></span> This property exists only for elements which are children of another element, for example for images nested into a layer.
<span id="line314"></span> Inversely to the </span><span><<span class="start-tag">tt</span>></span><span>children</span><span></<span class="end-tag">tt</span>></span><span> array, parent is a reference from a child to its parent.
<span id="line315"></span> With
<span id="line316"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line317"></span> </span><span><<span class="start-tag">tt</span>></span><span>if(dd.elements.imageName.parent)...;</span><span></<span class="end-tag">tt</span>></span><span>
<span id="line318"></span> </span><span><<span class="start-tag">br</span>></span><span>or</span><span><<span class="start-tag">br</span>></span><span>
<span id="line319"></span> </span><span><<span class="start-tag">tt</span>></span><span>if(dd.obj.parent)...;</span><span></<span class="end-tag">tt</span>></span><span>
<span id="line320"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line321"></span> , for example, you might examine if a certain image (first example) or the currently dragged item (second example) belongs to a layer (or to another image) or not.
<span id="line322"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line323"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line324"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line325"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span></span><span><<span class="start-tag">tr</span>></span><span></span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>src</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span></span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>string [r]</span><span></<span class="end-tag">td</span>></span><span></span><span></<span class="end-tag">tr</span>></span><span></span><span></<span class="end-tag">table</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line326"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line327"></span> Images only.
<span id="line328"></span> Current URL (path, source).
<span id="line329"></span> To swap an image, use its </span><span><<span class="start-tag">tt</span>></span><span>swapImage()</span><span></<span class="end-tag">tt</span>></span><span> method.
<span id="line330"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line331"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line332"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line333"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span></span><span><<span class="start-tag">tr</span>></span><span></span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>text</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span></span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>string [r]</span><span></<span class="end-tag">td</span>></span><span></span><span></<span class="end-tag">tr</span>></span><span></span><span></<span class="end-tag">table</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line334"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line335"></span> Layers only.
<span id="line336"></span> Current inner HTML that has been written to the layer by use of the </span><span><<span class="start-tag">tt</span>></span><span>write()</span><span></<span class="end-tag">tt</span>></span><span> method.
<span id="line337"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line338"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line339"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line340"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span></span><span><<span class="start-tag">tr</span>></span><span></span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>vertical</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span></span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>boolean [r]</span><span></<span class="end-tag">td</span>></span><span></span><span></<span class="end-tag">tr</span>></span><span></span><span></<span class="end-tag">table</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line341"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line342"></span> Indicates whether the item can be dragged vertically only.
<span id="line343"></span> To toggle this movement restriction, you can either apply the VERTICAL </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/dragdrop/commands_e.htm">commands_e.htm</a>"></span><span>command</span><span></<span class="end-tag">a</span>></span><span>,
<span id="line344"></span> or invoke the </span><span><<span class="start-tag">tt</span>></span><span>setVertical()</span><span></<span class="end-tag">tt</span>></span><span> method.
<span id="line345"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line346"></span> (See also </span><span><<span class="start-tag">tt</span>></span><span>horizontal</span><span></<span class="end-tag">tt</span>></span><span>.)
<span id="line347"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line348"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line349"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line350"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span></span><span><<span class="start-tag">tr</span>></span><span></span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>visible</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span></span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>boolean [r]</span><span></<span class="end-tag">td</span>></span><span></span><span></<span class="end-tag">tr</span>></span><span></span><span></<span class="end-tag">table</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line351"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line352"></span> Indicates visibility of item.
<span id="line353"></span> </span><span><<span class="start-tag">tt</span>></span><span>true</span><span></<span class="end-tag">tt</span>></span><span> if element is visible, </span><span><<span class="start-tag">tt</span>></span><span>false</span><span></<span class="end-tag">tt</span>></span><span> if element has been hidden by use of the </span><span><<span class="start-tag">tt</span>></span><span>.hide()</span><span></<span class="end-tag">tt</span>></span><span> method.
<span id="line354"></span> To toggle the visibility of an item, it's strictly recommended to use its </span><span><<span class="start-tag">tt</span>></span><span>hide()</span><span></<span class="end-tag">tt</span>></span><span> and </span><span><<span class="start-tag">tt</span>></span><span>show()</span><span></<span class="end-tag">tt</span>></span><span> methods only.
<span id="line355"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line356"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line357"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line358"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">100%</a>" <span class="attribute-name">cellpadding</span>="<a class="attribute-value">0</a>" <span class="attribute-name">cellspacing</span>="<a class="attribute-value">0</a>"></span><span></span><span><<span class="start-tag">tr</span>></span><span></span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>z</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span></span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>number [r]</span><span></<span class="end-tag">td</span>></span><span></span><span></<span class="end-tag">tr</span>></span><span></span><span></<span class="end-tag">table</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line359"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line360"></span> Retrieves the current z-index, i. e. the stacking order relative to the other drag-drop elements.
<span id="line361"></span> Z-indices are internally managed by wz_dragdrop.js and usually not of interest for external scripting use.
<span id="line362"></span> Otherwise, use the method setZ() to set the z-index of the item.
<span id="line363"></span> Or maximizeZ() to lift the element to the currently highest z-index.
<span id="line364"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line365"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line366"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line367"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">colspan</span>="<a class="attribute-value">2</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#eeeeee</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>Methods of the Drag <span class="entity"><span>&</span>amp;</span> Drop Elements</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line368"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line369"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line370"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line371"></span> </span><span><<span class="start-tag">tt</span> <span class="attribute-name">style</span>="<a class="attribute-value">white-space:nowrap;</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>copy()</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line372"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line373"></span> </span><span><<span class="start-tag">img</span> <span class="attribute-name">name</span>="<a class="attribute-value">cat</a>" <span class="attribute-name">align</span>="<a class="attribute-value">right</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/images/dragdrop/azcat.jpg">../images/dragdrop/azcat.jpg</a>" <span class="attribute-name">width</span>="<a class="attribute-value">110</a>" <span class="attribute-name">height</span>="<a class="attribute-value">106</a>" <span class="attribute-name">alt</span>="<a class="attribute-value"></a>"></span><span>
<span id="line374"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line375"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line376"></span> For images only.
<span id="line377"></span> Creates a copy and adds it to the image's </span><span><<span class="start-tag">tt</span>></span><span>copies</span><span></<span class="end-tag">tt</span>></span><span> array.
<span id="line378"></span> Optionally, </span><span><<span class="start-tag">tt</span>></span><span>copy()</span><span></<span class="end-tag">tt</span>></span><span> accepts a parameter that specifies how many copies to be created:
<span id="line379"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line380"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) dd.elements.cat.copy(2);return false;</a>"></span><span>dd.elements.cat.copy(2);</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line381"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line382"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line383"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line384"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span> <span class="attribute-name">style</span>="<a class="attribute-value">white-space:nowrap;</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>hide()</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line385"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line386"></span> </span><span><<span class="start-tag">img</span> <span class="attribute-name">name</span>="<a class="attribute-value">race</a>" <span class="attribute-name">align</span>="<a class="attribute-value">left</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/images/dragdrop/ko1_race.jpg">../images/dragdrop/ko1_race.jpg</a>" <span class="attribute-name">width</span>="<a class="attribute-value">140</a>" <span class="attribute-name">height</span>="<a class="attribute-value">82</a>" <span class="attribute-name">alt</span>="<a class="attribute-value"></a>"></span><span>
<span id="line387"></span> Hides item: </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) dd.elements.race.hide();return false;</a>"></span><span>dd.elements.race.hide();</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>.
<span id="line388"></span> Optionally, </span><span><<span class="start-tag">tt</span>></span><span>hide()</span><span></<span class="end-tag">tt</span>></span><span> accepts a parameter (value: true) which completely removes the empty space (spacer) for the hidden item:
<span id="line389"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) dd.elements.race.hide(true);return false;</a>"></span><span>dd.elements.race.hide(true);</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line390"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line391"></span> It's strictly recommended to toggle the visibility of items with </span><span><<span class="start-tag">tt</span>></span><span>hide()</span><span></<span class="end-tag">tt</span>></span><span> and </span><span><<span class="start-tag">tt</span>></span><span>show()</span><span></<span class="end-tag">tt</span>></span><span> only.
<span id="line392"></span> For example, to hide certain items on your page initially, invoke their </span><span><<span class="start-tag">tt</span>></span><span>hide()</span><span></<span class="end-tag">tt</span>></span><span> methods immediately after SET_DHTML() has been called, even if the 'visibility' CSS attributes of these items have been set to 'hidden' in advance.
<span id="line393"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line394"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) dd.elements.race.show();return false;</a>"></span><span>dd.elements.race.show();</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line395"></span> <span class="entity"><span>&</span>nbsp;</span> <span class="entity"><span>&</span>nbsp;</span> <span class="entity"><span>&</span>nbsp;</span>
<span id="line396"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) alert(dd.elements.race.visible);return false;</a>"></span><span>alert(dd.elements.race.visible);</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line397"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line398"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line399"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line400"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span> <span class="attribute-name">style</span>="<a class="attribute-value">white-space:nowrap;</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>moveBy(</span><span></<span class="end-tag">b</span>></span><span>deltaX,deltaY</span><span><<span class="start-tag">b</span>></span><span>)</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line401"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line402"></span> Often more convenient than moveTo().
<span id="line403"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line404"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">javascript:if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) dd.elements.einstein.moveBy(+20, -7);return false;</a>"></span><span>dd.elements.einstein.moveBy(+20,<span class="entity"><span>&</span>nbsp;</span>-7);</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line405"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line406"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line407"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line408"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line409"></span> </span><span><<span class="start-tag">tt</span> <span class="attribute-name">style</span>="<a class="attribute-value">white-space:nowrap;</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>moveTo(</span><span></<span class="end-tag">b</span>></span><span>new_x,<span class="entity"><span>&</span>nbsp;</span>new_y</span><span><<span class="start-tag">b</span>></span><span>)</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line410"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line411"></span> </span><span><<span class="start-tag">img</span> <span class="attribute-name">name</span>="<a class="attribute-value">einstein</a>" <span class="attribute-name">align</span>="<a class="attribute-value">right</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/images/dragdrop/einstrec.gif">../images/dragdrop/einstrec.gif</a>" <span class="attribute-name">width</span>="<a class="attribute-value">150</a>" <span class="attribute-name">height</span>="<a class="attribute-value">96</a>" <span class="attribute-name">alt</span>="<a class="attribute-value"></a>"></span><span>
<span id="line412"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line413"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line414"></span> Moves element to the document-related co-ordinates newX, newY.
<span id="line415"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line416"></span> </span><span><<span class="start-tag">tt</span>></span><span>
<span id="line417"></span> var einstein = dd.elements.einstein;
<span id="line418"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line419"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">javascript:if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) dd.elements.einstein.moveTo(dd.elements.einstein.x-20, dd.elements.einstein.y+7);return false;</a>"></span><span>einstein.moveTo(einstein.x-20, einstein.y+7);</span><span></<span class="end-tag">a</span>></span><span>
<span id="line420"></span> </span><span></<span class="end-tag">tt</span>></span><span>
<span id="line421"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line422"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line423"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line424"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line425"></span> </span><span><<span class="start-tag">tt</span> <span class="attribute-name">style</span>="<a class="attribute-value">white-space:nowrap;</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>resizeBy(</span><span></<span class="end-tag">b</span>></span><span>deltaW,deltaH</span><span><<span class="start-tag">b</span>></span><span>)</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line426"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line427"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line428"></span> Often more convenient than resizeTo().
<span id="line429"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line430"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) dd.elements.einstein.resizeBy(20, -6);return false;</a>"></span><span>dd.elements.einstein.resizeBy(22,<span class="entity"><span>&</span>nbsp;</span>-5);</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line431"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line432"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line433"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line434"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line435"></span> </span><span><<span class="start-tag">tt</span> <span class="attribute-name">style</span>="<a class="attribute-value">white-space:nowrap;</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>resizeTo(</span><span></<span class="end-tag">b</span>></span><span>width,height</span><span><<span class="start-tag">b</span>></span><span>)</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line436"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line437"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line438"></span> Adjusts width and height of a drag<span class="entity"><span>&</span>amp;</span>drop layer or image to the specified pixel sizes.
<span id="line439"></span> Warning, regarding only layers, not images: Some browsers with less extended DHTML abilities (Netscape 4, Opera<span class="entity"><span>&</span>nbsp;</span><span class="entity"><span>&</span>lt;</span>7) are not able to re-flow the text within a layer after its size has been changed.
<span id="line440"></span> Therefore, if the remaining space inside the layer is insufficient, it may happen that parts of the text become clipped off and invisible.
<span id="line441"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line442"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) dd.elements.einstein.resizeTo(document.forms[0].KW.value, document.forms[0].KH.value);return false;</a>"></span><span>dd.elements.einstein.resizeTo(</span><span></<span class="end-tag">a</span>></span><span></span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">KW</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">4</a>" <span class="attribute-name">value</span>="<a class="attribute-value">300</a>"></span><span>,</span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">KH</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">4</a>" <span class="attribute-name">value</span>="<a class="attribute-value">192</a>"></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) dd.elements.einstein.resizeTo(document.forms[0].KW.value, document.forms[0].KH.value);return false;</a>"></span><span>);</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line443"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line444"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line445"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line446"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span> <span class="attribute-name">style</span>="<a class="attribute-value">white-space:nowrap;</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>show()</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line447"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line448"></span> Makes item visible again.
<span id="line449"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line450"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) dd.elements.race.show();return false;</a>"></span><span>dd.elements.race.show();</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line451"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line452"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line453"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line454"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span> <span class="attribute-name">style</span>="<a class="attribute-value">white-space:nowrap;</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>swapImage(</span><span></<span class="end-tag">b</span>></span><span><span class="entity"><span>&</span>quot;</span>new_path<span class="entity"><span>&</span>quot;</span></span><span><<span class="start-tag">b</span>></span><span>)</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line455"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line456"></span> For images only.
<span id="line457"></span> Replaces an image by the specified path that must be enclosed in single- or double-quotes.
<span id="line458"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line459"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">javascript:if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) dd.elements.fateba_se.swapImage('../images/dragdrop/ko5.jpg');return false;</a>"></span><span>dd.elements.fateba_se.swapImage('ko5.jpg');</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line460"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line461"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">javascript:if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) dd.elements.fateba_se.swapImage(dd.elements.fateba_se.defsrc);return false;</a>"></span><span>dd.elements.fateba_se.swapImage(dd.elements.fateba_se.defsrc);</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line462"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line463"></span> To swap a multiplied (through the COPY-</span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/dragdrop/commands_e.htm">commands_e.htm</a>"></span><span>command</span><span></<span class="end-tag">a</span>></span><span> or the </span><span><<span class="start-tag">tt</span>></span><span>copy()</span><span></<span class="end-tag">tt</span>></span><span> method) image and any of his copies ad once, swapImage() accepts an optional second parameter </span><span><<span class="start-tag">tt</span>></span><span>true</span><span></<span class="end-tag">tt</span>></span><span>.
<span id="line464"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line465"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line466"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line467"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line468"></span> </span><span><<span class="start-tag">tt</span> <span class="attribute-name">style</span>="<a class="attribute-value">white-space:nowrap;</a>"></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>addChild(</span><span></<span class="end-tag">b</span>></span><span>image or layer</span><span><<span class="start-tag">b</span>></span><span>)</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line469"></span> </span><span><<span class="start-tag">center</span>></span><span>
<span id="line470"></span> </span><span><<span class="start-tag">img</span> <span class="attribute-name">name</span>="<a class="attribute-value">fateba_se</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/images/dragdrop/fateba_se.jpg">../images/dragdrop/fateba_se.jpg</a>" <span class="attribute-name">width</span>="<a class="attribute-value">200</a>" <span class="attribute-name">height</span>="<a class="attribute-value">157</a>" <span class="attribute-name">alt</span>="<a class="attribute-value"></a>"></span><span>
<span id="line471"></span> </span><span><<span class="start-tag">small</span>></span><span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span></<span class="end-tag">small</span>></span><span>
<span id="line472"></span> </span><span><<span class="start-tag">img</span> <span class="attribute-name">name</span>="<a class="attribute-value">ko5_st</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/images/dragdrop/ko5_st.jpg">../images/dragdrop/ko5_st.jpg</a>" <span class="attribute-name">width</span>="<a class="attribute-value">130</a>" <span class="attribute-name">height</span>="<a class="attribute-value">60</a>" <span class="attribute-name">alt</span>="<a class="attribute-value"></a>"></span><span>
<span id="line473"></span> </span><span></<span class="end-tag">center</span>></span><span>
<span id="line474"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line475"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line476"></span> Adds the item specified by the parameter to the element's </span><span><<span class="start-tag">tt</span>></span><span>children</span><span></<span class="end-tag">tt</span>></span><span> array.
<span id="line477"></span> Hence the new 'child' will be treated as if being nested into the parent element, and be dependent from the parent's behavior, i.e. movements and visibility status.
<span id="line478"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line479"></span> </span><span><<span class="start-tag">tt</span>></span><span>addChild()</span><span></<span class="end-tag">tt</span>></span><span> can even 'steal' items from other elements, and automatically remove them from the previous parent's </span><span><<span class="start-tag">tt</span>></span><span>children</span><span></<span class="end-tag">tt</span>></span><span> array.
<span id="line480"></span> However, </span><span><<span class="start-tag">tt</span>></span><span>addChild()</span><span></<span class="end-tag">tt</span>></span><span> can not steal DIVs which were natively nested into another parent layer, i.e. through the HTML code.
<span id="line481"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line482"></span> Tip: </span><span><<span class="start-tag">tt</span>></span><span>addChild()</span><span></<span class="end-tag">tt</span>></span><span> can even build parent-child relationships between images, see example on the left side.
<span id="line483"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line484"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) dd.elements.fateba_se.addChild(dd.elements.ko5_st);return false;</a>"></span><span>dd.elements.fateba_se.addChild(dd.elements.ko5_st);</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line485"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line486"></span> As parameter, </span><span><<span class="start-tag">tt</span>></span><span>addChild()</span><span></<span class="end-tag">tt</span>></span><span> accepts either the name of the new child in single or double quotes, or a reference to the item as in the example above.
<span id="line487"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line488"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line489"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line490"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line491"></span> </span><span><<span class="start-tag">tt</span> <span class="attribute-name">style</span>="<a class="attribute-value">white-space:nowrap;</a>"></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>attachChild(</span><span></<span class="end-tag">b</span>></span><span>child element</span><span><<span class="start-tag">b</span>></span><span>)</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line492"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line493"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line494"></span> For layers that contain child elements (images or DIVs) that have previously been made independent from the layer through the DETACH_CHILDREN command or the </span><span><<span class="start-tag">tt</span>></span><span>detachChild()</span><span></<span class="end-tag">tt</span>></span><span> method.
<span id="line495"></span> As parameter, </span><span><<span class="start-tag">tt</span>></span><span>attachChild()</span><span></<span class="end-tag">tt</span>></span><span> requires one of these children (i.e. an element of the layer's </span><span><<span class="start-tag">tt</span>></span><span>children</span><span></<span class="end-tag">tt</span>></span><span> array).
<span id="line496"></span> attachChild() renders this child dependent from the layer's behavior again (i.e. from the layer's moveTo(), moveBy(), hide() and show() methods).
<span id="line497"></span> Other than </span><span><<span class="start-tag">tt</span>></span><span>addChild()</span><span></<span class="end-tag">tt</span>></span><span>, </span><span><<span class="start-tag">tt</span>></span><span>attachChild()</span><span></<span class="end-tag">tt</span>></span><span> is not capable of 'stealing' an image or DIV from elsewhere and adding it to the layer's own </span><span><<span class="start-tag">tt</span>></span><span>children</span><span></<span class="end-tag">tt</span>></span><span> array.
<span id="line498"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line499"></span> Parameter: either the name of the image in single or double quotes, or the index of the image in the layer's </span><span><<span class="start-tag">tt</span>></span><span>children</span><span></<span class="end-tag">tt</span>></span><span> array, or a reference to the image as in the following example:
<span id="line500"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line501"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements.fateba_se.children.length > 1) dd.elements.fateba_se.attachChild(dd.elements.ko5_st);return false;</a>"></span><span>dd.elements.fateba_se.attachChild(dd.elements.ko5_st);</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line502"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line503"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line504"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line505"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line506"></span> </span><span><<span class="start-tag">tt</span> <span class="attribute-name">style</span>="<a class="attribute-value">white-space:nowrap;</a>"></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>detachChild(</span><span></<span class="end-tag">b</span>></span><span>child element</span><span><<span class="start-tag">b</span>></span><span>)</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line507"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line508"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line509"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements.fateba_se.children.length > 1) dd.elements.fateba_se.detachChild('ko5_st');return false;</a>"></span><span>dd.elements.fateba_se.detachChild('ko5_st');</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line510"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line511"></span> For layers containing child elements - child elements are either images nested into a DIV, or elements (images or DIVs) turned into children of the layer via </span><span><<span class="start-tag">tt</span>></span><span>addChild()</span><span></<span class="end-tag">tt</span>></span><span>.
<span id="line512"></span> Requires one of these children as parameter, and detaches it from the layer, i.e. makes it's movements and visibility independent from the layer.
<span id="line513"></span> This method has the same effect for a certain element, as the DETACH_CHILDREN command, passed to SET_DHTML(), would have for all images being nested into the layer.
<span id="line514"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line515"></span> Parameter: equivalent to </span><span><<span class="start-tag">tt</span>></span><span>.attachChild()</span><span></<span class="end-tag">tt</span>></span><span>
<span id="line516"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line517"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line518"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line519"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line520"></span> </span><span><<span class="start-tag">tt</span> <span class="attribute-name">style</span>="<a class="attribute-value">white-space:nowrap;</a>"></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>del()</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line521"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line522"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line523"></span> Removes the element, that is, disables its DHTML capabilities and its draggability and removes it from the </span><span><<span class="start-tag">tt</span>></span><span>dd.elements</span><span></<span class="end-tag">tt</span>></span><span> array.
<span id="line524"></span> However, del() does not destroy the HTML element per se.
<span id="line525"></span> Example:
<span id="line526"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line527"></span> </span><span><<span class="start-tag">tt</span>></span><span>dd.elements.someName.del();</span><span></<span class="end-tag">tt</span>></span><span>
<span id="line528"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line529"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line530"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line531"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line532"></span> </span><span><<span class="start-tag">tt</span> <span class="attribute-name">style</span>="<a class="attribute-value">white-space:nowrap;</a>"></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>getEltBelow()</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line533"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line534"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line535"></span> The API's hit-test function.</span><span><<span class="start-tag">br</span>></span><span>
<span id="line536"></span> Returns the element below the concerned item, that is, the topmost element overlapped by the concerned item, otherwise </span><span><<span class="start-tag">tt</span>></span><span>null</span><span></<span class="end-tag">tt</span>></span><span>.
<span id="line537"></span> Might be used, for instance, in </span><span><<span class="start-tag">tt</span>></span><span>my_DropFunc()</span><span></<span class="end-tag">tt</span>></span><span> to get directly the item on which the dragged element (referencable by </span><span><<span class="start-tag">tt</span>></span><span>dd.obj</span><span></<span class="end-tag">tt</span>></span><span>) has been dropped:
<span id="line538"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line539"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line540"></span> </span><span><<span class="start-tag">tt</span>></span><span>var dropTarget = dd.obj.getEltBelow();
<span id="line541"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line542"></span> if(dropTarget != null) alert(dropTarget.name);</span><span></<span class="end-tag">tt</span>></span><span>
<span id="line543"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line544"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line545"></span> To satisfy the <span class="entity"><span>&</span>quot;</span>hit<span class="entity"><span>&</span>quot;</span> condition, the element below must be in both dimensions overlapped by at least 50%.
<span id="line546"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line547"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line548"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line549"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>maximizeZ()</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line550"></span> </span><span><<span class="start-tag">td</span>></span><span>Sets the z-index of the element to the currently highest level. Therefore this element will be able to overlap each other.
<span id="line551"></span> Note: This method automatically is performed if the element is hit by a mousedown-event, i.<span class="entity"><span>&</span>nbsp;</span>e. selected to become current drag object.</span><span></<span class="end-tag">td</span>></span><span>
<span id="line552"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line553"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line554"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span> <span class="attribute-name">style</span>="<a class="attribute-value">white-space:nowrap;</a>"></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>setBgColor(</span><span></<span class="end-tag">b</span>></span><span><span class="entity"><span>&</span>quot;</span>color<span class="entity"><span>&</span>quot;</span></span><span><<span class="start-tag">b</span>></span><span>)</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line555"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line556"></span> Changes the background color of a layer, or a transparent Drag'nDrop image (GIF, PNG) (!), to the value specified by the parameter.
<span id="line557"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line558"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) dd.elements.bluelyr.setBgColor(document.forms[0].GreylyrColor.value);return false;</a>"></span><span>dd.elements.bluelyr.setBgColor(<span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">a</span>></span><span></span><span><<span class="start-tag">input</span> <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">name</span>="<a class="attribute-value">GreylyrColor</a>" <span class="attribute-name">size</span>="<a class="attribute-value">8</a>" <span class="attribute-name">value</span>="<a class="attribute-value">#99dd99</a>"></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">;if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) dd.elements.bluelyr.setBgColor(document.forms[0].GreylyrColor.value);return false;</a>"></span><span><span class="entity"><span>&</span>quot;</span>);</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line559"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line560"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line561"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line562"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span> <span class="attribute-name">style</span>="<a class="attribute-value">white-space:nowrap;</a>"></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>setCursor(</span><span></<span class="end-tag">b</span>></span><span><span class="entity"><span>&</span>quot;</span>CSS value<span class="entity"><span>&</span>quot;</span></span><span><<span class="start-tag">b</span>></span><span>)</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line563"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line564"></span> Alters cursor over concerned Drag<span class="entity"><span>&</span>amp;</span>Drop item.
<span id="line565"></span> Accepts as parameter either a CSS cursor value as string, for example dd.elements.someImg.setCursor('crosshair');, or alternatively one of the API's cursor </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/dragdrop/commands_e.htm">commands_e.htm</a>"></span><span>commands</span><span></<span class="end-tag">a</span>></span><span>, for example dd.elements.someImg.setCursor(CURSOR_CROSSHAIR);
<span id="line566"></span> </span><span class="comment"><!--br>
<span id="line567"></span> <tt><a class="code" href="javascript:void(0)" onclick="if(window.dd &amp;&amp; dd.elements) dd.elements.bluelyr.setBgColor(document.forms[0].GreylyrColor.value);return false;">dd.elements.bluelyr.setBgColor(&quot;</a><input type="text" name="GreylyrColor" size="8" value="#99dd99"><a class="code" href="javascript:void(0)" onclick=";if(window.dd &amp;&amp; dd.elements) dd.elements.bluelyr.setBgColor(document.forms[0].GreylyrColor.value);return false;">&quot;);</a></tt--></span><span>
<span id="line568"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line569"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line570"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line571"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line572"></span> </span><span><<span class="start-tag">tt</span> <span class="attribute-name">style</span>="<a class="attribute-value">white-space:nowrap;</a>"></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>setDraggable(</span><span></<span class="end-tag">b</span>></span><span>true/false</span><span><<span class="start-tag">b</span>></span><span>)</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line573"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line574"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line575"></span> Parameter </span><span><<span class="start-tag">tt</span>></span><span>true</span><span></<span class="end-tag">tt</span>></span><span> enables, </span><span><<span class="start-tag">tt</span>></span><span>false</span><span></<span class="end-tag">tt</span>></span><span> disables draggability of the element.
<span id="line576"></span> However, even with switched-off draggability, the element is not removed from the </span><span><<span class="start-tag">tt</span>></span><span>dd.elements</span><span></<span class="end-tag">tt</span>></span><span> array, hence keeping any of its DHTML abilities, except of the ability to be dragged or resized with the mouse.
<span id="line577"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line578"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) dd.elements.dog.setDraggable(false);return false;</a>"></span><span>dd.elements.dog.setDraggable(false);</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line579"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line580"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) dd.elements.dog.setDraggable(true);return false;</a>"></span><span>dd.elements.dog.setDraggable(true);</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line581"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line582"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line583"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line584"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line585"></span> </span><span><<span class="start-tag">tt</span> <span class="attribute-name">style</span>="<a class="attribute-value">white-space:nowrap;</a>"></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>setHorizontal(</span><span></<span class="end-tag">b</span>></span><span>true/false</span><span><<span class="start-tag">b</span>></span><span>)</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line586"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line587"></span> </span><span><<span class="start-tag">img</span> <span class="attribute-name">name</span>="<a class="attribute-value">dog</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/images/dragdrop/deddie2.jpg">../images/dragdrop/deddie2.jpg</a>" <span class="attribute-name">width</span>="<a class="attribute-value">100</a>" <span class="attribute-name">height</span>="<a class="attribute-value">113</a>" <span class="attribute-name">alt</span>="<a class="attribute-value"></a>"></span><span>
<span id="line588"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line589"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line590"></span> After calling that method with the parameter </span><span><<span class="start-tag">tt</span>></span><span>true</span><span></<span class="end-tag">tt</span>></span><span>, the item can be dragged horizontally only. The parameter </span><span><<span class="start-tag">tt</span>></span><span>false</span><span></<span class="end-tag">tt</span>></span><span> removes that restriction again.
<span id="line591"></span> Compare with the HORIZONTAL </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/dragdrop/commands_e.htm">commands_e.htm</a>"></span><span>command</span><span></<span class="end-tag">a</span>></span><span> which has the same effect, but can only be applied with the intial call of </span><span><<span class="start-tag">tt</span>></span><span>SET_DHTML()</span><span></<span class="end-tag">tt</span>></span><span>.
<span id="line592"></span> The current state can be checked via the property </span><span><<span class="start-tag">tt</span>></span><span>horizontal</span><span></<span class="end-tag">tt</span>></span><span>.
<span id="line593"></span> Play again with the dog Teddy (or: learn how to flip a slider):
<span id="line594"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line595"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) dd.elements.dog.setHorizontal(true);return false;</a>"></span><span>dd.elements.dog.setHorizontal(true);</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line596"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line597"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) dd.elements.dog.setHorizontal(false);return false;</a>"></span><span>dd.elements.dog.setHorizontal(false);</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line598"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line599"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) dd.elements.dog.setVertical(true);return false;</a>"></span><span>dd.elements.dog.setVertical(true);</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line600"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line601"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) dd.elements.dog.setVertical(false);return false;</a>"></span><span>dd.elements.dog.setVertical(false);</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line602"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line603"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line604"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line605"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line606"></span> </span><span><<span class="start-tag">tt</span> <span class="attribute-name">style</span>="<a class="attribute-value">white-space:nowrap;</a>"></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>setOpacity(</span><span></<span class="end-tag">b</span>></span><span>float</span><span><<span class="start-tag">b</span>></span><span>)</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line607"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line608"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line609"></span> Sets the opacity of the item (image or DIV).
<span id="line610"></span> Parameter must be a decimalpoint number between 0.0 (entirely transparent, invisible) and 1.0 (opaque, no transparency).
<span id="line611"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line612"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">;if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) dd.elements.dog.setOpacity(parseFloat(document.forms[0].Opaq.value.replace(/\,/g, '.')));return false;</a>"></span><span>dd.elements.dog.setOpacity(</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line613"></span> </span><span><<span class="start-tag">input</span> <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">name</span>="<a class="attribute-value">Opaq</a>" <span class="attribute-name">size</span>="<a class="attribute-value">5</a>" <span class="attribute-name">maxlength</span>="<a class="attribute-value">4</a>" <span class="attribute-name">value</span>="<a class="attribute-value">0.6</a>"></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">;if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) dd.elements.dog.setOpacity(parseFloat(document.forms[0].Opaq.value.replace(/\,/g, '.')));return false;</a>"></span><span>);</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line614"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line615"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line616"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line617"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line618"></span> </span><span><<span class="start-tag">tt</span> <span class="attribute-name">style</span>="<a class="attribute-value">white-space:nowrap;</a>"></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>setResizable(</span><span></<span class="end-tag">b</span>></span><span>true/false</span><span><<span class="start-tag">b</span>></span><span>)</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line619"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line620"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line621"></span> Enables/disables RESIZABLE functionality of concerned element.
<span id="line622"></span> RESIZABLE functionality means that the element can be resized instead of dragged if the SHIFT key is pressed during a drag movement (more precisely: at the beginning of a drag action).
<span id="line623"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line624"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) dd.elements.dog.setResizable(false);return false;</a>"></span><span>dd.elements.dog.setResizable(false);</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line625"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line626"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) dd.elements.dog.setResizable(true);return false;</a>"></span><span>dd.elements.dog.setResizable(true);</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line627"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line628"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line629"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line630"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line631"></span> </span><span><<span class="start-tag">tt</span> <span class="attribute-name">style</span>="<a class="attribute-value">white-space:nowrap;</a>"></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>setScalable(</span><span></<span class="end-tag">b</span>></span><span>true/false</span><span><<span class="start-tag">b</span>></span><span>)</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line632"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line633"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line634"></span> Enables/disables SCALABLE functionality of element.
<span id="line635"></span> Resembling RESIZABLE in any other aspect, SCALABLE preserves the width/height ratio of item.
<span id="line636"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line637"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) dd.elements.dog.setScalable(false);return false;</a>"></span><span>dd.elements.dog.setScalable(false);</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line638"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line639"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) dd.elements.dog.setScalable(true);return false;</a>"></span><span>dd.elements.dog.setScalable(true);</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line640"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line641"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line642"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line643"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line644"></span> </span><span><<span class="start-tag">tt</span> <span class="attribute-name">style</span>="<a class="attribute-value">white-space:nowrap;</a>"></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>setVertical(</span><span></<span class="end-tag">b</span>></span><span>true/false</span><span><<span class="start-tag">b</span>></span><span>)</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line645"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line646"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line647"></span> Has the same effect as the VERTICAL </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/dragdrop/commands_e.htm">commands_e.htm</a>"></span><span>command</span><span></<span class="end-tag">a</span>></span><span>, but allows you to toggle that dragdirection restriction at runtime.
<span id="line648"></span> The current state can be checked via the property </span><span><<span class="start-tag">tt</span>></span><span>vertical</span><span></<span class="end-tag">tt</span>></span><span>.
<span id="line649"></span> See also </span><span><<span class="start-tag">tt</span>></span><span>setHorizontal()</span><span></<span class="end-tag">tt</span>></span><span>.
<span id="line650"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line651"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line652"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line653"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>setZ(</span><span></<span class="end-tag">b</span>></span><span>number</span><span><<span class="start-tag">b</span>></span><span>)</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line654"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line655"></span> Sets the z-index of the element to the specified value.
<span id="line656"></span> May be useful, for example, to permute the stacking order of two drag drop items overlapping each other - the property z retrieves the current z-index.
<span id="line657"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line658"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line659"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line660"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line661"></span> </span><span><<span class="start-tag">tt</span> <span class="attribute-name">style</span>="<a class="attribute-value">white-space:nowrap;</a>"></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>write(</span><span></<span class="end-tag">b</span>></span><span><span class="entity"><span>&</span>quot;</span>html<span class="entity"><span>&</span>quot;</span></span><span><<span class="start-tag">b</span>></span><span>)</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line662"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line663"></span> </span><span><<span class="start-tag">img</span> <span class="attribute-name">name</span>="<a class="attribute-value">buoy2</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/images/transparentpixel.gif">../images/transparentpixel.gif</a>" <span class="attribute-name">width</span>="<a class="attribute-value">1</a>" <span class="attribute-name">height</span>="<a class="attribute-value">1</a>" <span class="attribute-name">alt</span>="<a class="attribute-value"></a>"></span><span>
<span id="line664"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line665"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line666"></span> Writes to a layer and replaces its content.
<span id="line667"></span> Plus, assigns the new HTML to the </span><span><<span class="start-tag">tt</span>></span><span>text</span><span></<span class="end-tag">tt</span>></span><span> property of the concerned Drag<span class="entity"><span>&</span>amp;</span>Drop<span class="entity"><span>&</span>amp;</span>DHTML object.
<span id="line668"></span> Drag 'n Drop images within the layer, however, are protected and will not be deleted.
<span id="line669"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line670"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) dd.elements.bluelyr.write(document.forms[0].GreylyrTxt.value);return false;</a>"></span><span>dd.elements.bluelyr.write(<span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line671"></span> </span><span><<span class="start-tag">input</span> <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">name</span>="<a class="attribute-value">GreylyrTxt</a>" <span class="attribute-name">size</span>="<a class="attribute-value">68</a>" <span class="attribute-name">value</span>="<a class="attribute-value">This <span class="entity"><span>&</span>lt;</span>i<span class="entity"><span>&</span>gt;</span>HTML<span class="entity"><span>&</span>lt;</span>/i<span class="entity"><span>&</span>gt;</span> will be <span class="entity"><span>&</span>lt;</span>b<span class="entity"><span>&</span>gt;</span>written<span class="entity"><span>&</span>lt;</span>/b<span class="entity"><span>&</span>gt;</span> into the <span class="entity"><span>&</span>lt;</span>small<span class="entity"><span>&</span>gt;</span>small<span class="entity"><span>&</span>lt;</span>/small<span class="entity"><span>&</span>gt;</span> lightblue layer</a>"></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">;if(window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements) dd.elements.bluelyr.write(document.forms[0].GreylyrTxt.value);return false;</a>"></span><span><span class="entity"><span>&</span>quot;</span>);</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line672"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line673"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line674"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line675"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">colspan</span>="<a class="attribute-value">2</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#eeeeee</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>Further interfaces to the library</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line676"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line677"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line678"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">colspan</span>="<a class="attribute-value">2</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#eeeeee</a>"></span><span>
<span id="line679"></span> Properties and methods of the library's main object dd (<span class="entity"><span>&</span>quot;</span>drag-drop<span class="entity"><span>&</span>quot;</span>):
<span id="line680"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line681"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line682"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line683"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.elements</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line684"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line685"></span> Array of drag drop elements.
<span id="line686"></span> To access a certain drag drop element you may use any of the following notations:
<span id="line687"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line688"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.elements.ItemName</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line689"></span> </span><span><<span class="start-tag">br</span>></span><span>or</span><span><<span class="start-tag">br</span>></span><span>
<span id="line690"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.elements[<span class="entity"><span>&</span>quot;</span>ItemName<span class="entity"><span>&</span>quot;</span>]</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line691"></span> </span><span><<span class="start-tag">br</span>></span><span>or</span><span><<span class="start-tag">br</span>></span><span>
<span id="line692"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.elements[i]</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span> where i is index of the element.
<span id="line693"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line694"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.elements.length</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span> returns the number of drag drop items on your page (including copies of multiplied images).
<span id="line695"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line696"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line697"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line698"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.obj</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line699"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line700"></span> Contains the current drag object; otherwise nothing or null.
<span id="line701"></span> For example, to find out if <span class="entity"><span>&</span>quot;</span>image2<span class="entity"><span>&</span>quot;</span> is current drag object, simply write:
<span id="line702"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line703"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>if<span class="entity"><span>&</span>nbsp;</span>(dd.obj<span class="entity"><span>&</span>nbsp;</span>==<span class="entity"><span>&</span>nbsp;</span>dd.elements.image2)<span class="entity"><span>&</span>nbsp;</span>{</span><span><<span class="start-tag">i</span>></span><span>dependent<span class="entity"><span>&</span>nbsp;</span>statements;</span><span></<span class="end-tag">i</span>></span><span>}</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line704"></span> </span><span><<span class="start-tag">br</span>></span><span>or alternatively</span><span><<span class="start-tag">br</span>></span><span>
<span id="line705"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>if<span class="entity"><span>&</span>nbsp;</span>(dd.obj.name<span class="entity"><span>&</span>nbsp;</span>==<span class="entity"><span>&</span>nbsp;</span>"image2")<span class="entity"><span>&</span>nbsp;</span>{</span><span><<span class="start-tag">i</span>></span><span>dependent<span class="entity"><span>&</span>nbsp;</span>statements;</span><span></<span class="end-tag">i</span>></span><span>}</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line706"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line707"></span> An easy and direct way to access a property or call a method of the current drag item is a statement like </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.obj.</span><span><<span class="start-tag">i</span>></span><span>property</span><span></<span class="end-tag">i</span>></span><span></span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span> or </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.obj.</span><span><<span class="start-tag">i</span>></span><span>method()</span><span></<span class="end-tag">i</span>></span><span></span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line708"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line709"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line710"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line711"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.getScrollX()</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line712"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line713"></span> Returns how far the window has been scrolled horizontally.
<span id="line714"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line715"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if (window.dd) alert(dd.getScrollX());</a>"></span><span>alert(dd.getScrollX());</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line716"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line717"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line718"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line719"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.getScrollY()</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line720"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line721"></span> Returns how far the window has been scrolled vertically.
<span id="line722"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line723"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if (window.dd) alert(dd.getScrollY());</a>"></span><span>alert(dd.getScrollY());</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line724"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line725"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line726"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line727"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.getWndH()</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line728"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line729"></span> Returns the inner window height (of the visible client area).
<span id="line730"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line731"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if (window.dd) alert(dd.getWndH());</a>"></span><span>alert(dd.getWndH());</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line732"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line733"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line734"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line735"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.getWndW()</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line736"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line737"></span> Returns the inner window width (of the visible client area).
<span id="line738"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line739"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if (window.dd) alert(dd.getWndW());</a>"></span><span>alert(dd.getWndW());</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line740"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line741"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line742"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line743"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.Int()</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line744"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line745"></span> Transforms argument surely into integer.
<span id="line746"></span> Even if the transformation actually isn't possible, as for dd.Int(<span class="entity"><span>&</span>quot;</span>abc<span class="entity"><span>&</span>quot;</span>), the number 0 will be returned.
<span id="line747"></span> This behavior avoids data type errors.
<span id="line748"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line749"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line750"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line751"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.db</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line752"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line753"></span> = document.body, or, in Non-BackCompat-mode of IE6, document.documentElement.
<span id="line754"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line755"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line756"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line757"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.ie</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line758"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line759"></span> true, if Internet Explorer 4+
<span id="line760"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line761"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line762"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line763"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.n</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line764"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line765"></span> navigator.userAgent (lower case).
<span id="line766"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0)</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">if (window.dd) alert(dd.n);</a>"></span><span>alert(dd.n);</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span>
<span id="line767"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line768"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line769"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line770"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.n4</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line771"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line772"></span> true, if Netscape 4 (not Netscape <span class="entity"><span>&</span>gt;</span> 4).
<span id="line773"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line774"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line775"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line776"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.n6</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line777"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line778"></span> true, if browser based on Gecko-Engine (Mozilla, Netscape 6+, Galeon, Phoenix...);
<span id="line779"></span> also true with browsers with advanced W3C-DOM support.
<span id="line780"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line781"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line782"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line783"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">font</span> <span class="attribute-name">color</span>="<a class="attribute-value">#999999</a>"></span><span></span><span><<span class="start-tag">b</span>></span><span>dd.op</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">font</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line784"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line785"></span> true, if Opera 5+ browser, else false.
<span id="line786"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line787"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line788"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line789"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">colspan</span>="<a class="attribute-value">2</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#eeeeee</a>"></span><span>
<span id="line790"></span> </span><span><<span class="start-tag">b</span>></span><span>Making layers draggable by way of addition</span><span></<span class="end-tag">b</span>></span><span>
<span id="line791"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line792"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line793"></span> </span><span><<span class="start-tag">tr</span> <span class="attribute-name">valign</span>="<a class="attribute-value">top</a>" <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line794"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line795"></span> </span><span><<span class="start-tag">tt</span>></span><span>
<span id="line796"></span> </span><span><<span class="start-tag">b</span>></span><span>ADD_DHTML()</span><span></<span class="end-tag">b</span>></span><span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line797"></span> </span><span></<span class="end-tag">tt</span>></span><span>
<span id="line798"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line799"></span> </span><span><<span class="start-tag">div</span> <span class="attribute-name">id</span>="<a class="attribute-value">NewLayer1</a>" <span class="attribute-name">style</span>="<a class="attribute-value">position:relative;left:0px;top:10px;width:70px;height:50px;visibility:hidden;border:1px solid #000099;background:#d6e6ff;layer-background-color:#d6e6ff;</a>"></span><span></span><span></<span class="end-tag">div</span>></span><span>
<span id="line800"></span> </span><span><<span class="start-tag">div</span> <span class="attribute-name">id</span>="<a class="attribute-value">NewLayer2</a>" <span class="attribute-name">style</span>="<a class="attribute-value">position:relative;left:0px;top:20px;width:70px;height:50px;visibility:hidden;border:1px solid #660000;background:#ffcccc;layer-background-color:#ffcccc;</a>"></span><span></span><span></<span class="end-tag">div</span>></span><span>
<span id="line801"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line802"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line803"></span> Converts layers (DIV elements) into DHTML Drag'nDrop elements by way of addition, even after the page has fully loaded.
<span id="line804"></span> Useful particularly for dynamically created layers.
<span id="line805"></span> Note that SET_DHMTL() must have been invoked while the page was still loading, optionally even without arguments.
<span id="line806"></span> ADD_DHTML() does not work with images.
<span id="line807"></span> For a workaround you might insert images each into a DIV.
<span id="line808"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line809"></span> Like with SET_DHTML(), ADD_DHTML() requires the ID of the concerned layer(s) as parameter(s), each enclosed in single or double quotes,
<span id="line810"></span> and you can append individual commands with a plus-sign.
<span id="line811"></span> Of course, each of these layers will be added to the </span><span><<span class="start-tag">tt</span>></span><span>dd.elements</span><span></<span class="end-tag">tt</span>></span><span> array and hence provide the same properties and methods as layers initialized via SET_DHTML().
<span id="line812"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line813"></span> Example:
<span id="line814"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line815"></span> </span><span><<span class="start-tag">tt</span>></span><span>
<span id="line816"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">;if (window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> !dd.elements.NewLayer1) { ADD_DHTML('NewLayer1'+VERTICAL+MAXOFFTOP+100+MAXOFFBOTTOM+100); dd.elements.NewLayer1.show(); } return false;</a>"></span><span>ADD_DHTML(<span class="entity"><span>&</span>quot;</span>NewLayer1<span class="entity"><span>&</span>quot;</span>+VERTICAL+MAXOFFTOP+100+MAXOFFBOTTOM+100);</span><span></<span class="end-tag">a</span>></span><span>
<span id="line817"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line818"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">;if (window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> !dd.elements.NewLayer2) { ADD_DHTML('NewLayer2'+HORIZONTAL); dd.elements.NewLayer2.show(); } return false;</a>"></span><span>ADD_DHTML(<span class="entity"><span>&</span>quot;</span>NewLayer2<span class="entity"><span>&</span>quot;</span>+HORIZONTAL);</span><span></<span class="end-tag">a</span>></span><span>
<span id="line819"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line820"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">;if (window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements.NewLayer1) dd.elements.NewLayer1.setBgColor('#99dd99'); return false;</a>"></span><span>dd.elements.NewLayer1.setBgColor(<span class="entity"><span>&</span>quot;</span>#99dd99<span class="entity"><span>&</span>quot;</span>);</span><span></<span class="end-tag">a</span>></span><span>
<span id="line821"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line822"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">code</a>" <span class="attribute-name">href</span>="<a class="attribute-value">javascript:void(0);</a>" <span class="attribute-name">onclick</span>="<a class="attribute-value">;if (window.dd <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements <span class="entity"><span>&</span>amp;</span><span class="entity"><span>&</span>amp;</span> dd.elements.NewLayer2) dd.elements.NewLayer2.moveBy(16,8); return false;</a>"></span><span>dd.elements.NewLayer2.moveBy(16,8);</span><span></<span class="end-tag">a</span>></span><span>
<span id="line823"></span> </span><span></<span class="end-tag">tt</span>></span><span>
<span id="line824"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line825"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line826"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line827"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line828"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line829"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line830"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line831"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line832"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line833"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line834"></span> </span><span><<span class="start-tag">b</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">big</span>></span><span>Extending the Script</span><span></<span class="end-tag">big</span>></span><span></span><span></<span class="end-tag">b</span>></span><span>
<span id="line835"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line836"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line837"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line838"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line839"></span> <span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line840"></span> </span><span><<span class="start-tag">b</span>></span><span>1.)</span><span></<span class="end-tag">b</span>></span><span> wz_dragdrop.js provides four empty JavaScript function bodies that may be used for your own scripting extensions.
<span id="line841"></span> Have a look at the comment blocks inside these functions for the most important details.
<span id="line842"></span> For instance, you can access any of the above mentioned properties and methods of the currently dragged item with a statement like </span><span><<span class="start-tag">tt</span>></span><span>dd.obj.property</span><span></<span class="end-tag">tt</span>></span><span> and </span><span><<span class="start-tag">tt</span>></span><span>dd.obj.method()</span><span></<span class="end-tag">tt</span>></span><span>.
<span id="line843"></span> With </span><span><<span class="start-tag">tt</span>></span><span>dd.obj.name</span><span></<span class="end-tag">tt</span>></span><span> you'll get the name passed to SET_DHTML(), </span><span><<span class="start-tag">tt</span>></span><span>dd.obj.x</span><span></<span class="end-tag">tt</span>></span><span> and </span><span><<span class="start-tag">tt</span>></span><span>dd.obj.y</span><span></<span class="end-tag">tt</span>></span><span> will retrieve the co-ordinates of the currently dragged item;
<span id="line844"></span> with a statement as </span><span><<span class="start-tag">tt</span>></span><span>dd.obj.swapImage('anotherImg.jpg');</span><span></<span class="end-tag">tt</span>></span><span> you could swap an image once it reaches/leaves a predefined area, etc...
<span id="line845"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line846"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>my_PickFunc()</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span> is automatically called when a drag drop item is hit by a mousedown event.
<span id="line847"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line848"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>my_DragFunc()</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span> is permanently invoked while an item is dragged.
<span id="line849"></span> You can use this function, for instance, to compare the current location (x, y properties) of the dragged item with other DHTML elements on the page.
<span id="line850"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line851"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>my_ResizeFunc()</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span> is permanently invoked while an item is resized,
<span id="line852"></span> i.e. if the RESIZABLE command has been applied to the item and the <span class="entity"><span>&</span>lt;</span>shift<span class="entity"><span>&</span>gt;</span> key was pressed when the Drag operation started.
<span id="line853"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line854"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>my_DropFunc()</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span> is automatically called when an item is dropped.
<span id="line855"></span> This function may be used, for example, to find out which item (property </span><span><<span class="start-tag">tt</span>></span><span>name</span><span></<span class="end-tag">tt</span>></span><span>) has just been dropped at which location (coordinates </span><span><<span class="start-tag">tt</span>></span><span>x</span><span></<span class="end-tag">tt</span>></span><span> and </span><span><<span class="start-tag">tt</span>></span><span>y</span><span></<span class="end-tag">tt</span>></span><span>).
<span id="line856"></span> Or a statement like </span><span><<span class="start-tag">tt</span>></span><span>dd.obj.moveTo(someX,<span class="entity"><span>&</span>nbsp;</span>someY)</span><span></<span class="end-tag">tt</span>></span><span> might let the dropped item <span class="entity"><span>&</span>quot;</span>snap<span class="entity"><span>&</span>quot;</span> to a predefined location.
<span id="line857"></span> </span><span><<span class="start-tag">tt</span>></span><span>my_DropFunc()</span><span></<span class="end-tag">tt</span>></span><span> is also the ideal place to write properties like the coordinates, size and name of an item into <span class="entity"><span>&</span>lt;</span>input<span class="entity"><span>&</span>nbsp;</span>type=<span class="entity"><span>&</span>quot;</span>hidden<span class="entity"><span>&</span>quot;</span><span class="entity"><span>&</span>gt;</span> form elements to transmit these values to the server.
<span id="line858"></span> Note that dd.obj is still defined during the entire runtime of </span><span><<span class="start-tag">tt</span>></span><span>my_DropFunc()</span><span></<span class="end-tag">tt</span>></span><span> or other functions defined elsewhere but invoked from inside </span><span><<span class="start-tag">tt</span>></span><span>my_DropFunc()</span><span></<span class="end-tag">tt</span>></span><span>.
<span id="line859"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line860"></span> </span><span><<span class="start-tag">b</span>></span><span>2.)</span><span></<span class="end-tag">b</span>></span><span> Alternatively, wz_dragdrop.js provides setter methods to define custom event functions for each draggable item dynamically:
<span id="line861"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line862"></span> With </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>setPickFunc(</span><span></<span class="end-tag">b</span>></span><span></span><span><<span class="start-tag">i</span>></span><span>FunctionName</span><span></<span class="end-tag">i</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>)</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span> you can define which function shall be automatically envoked when a drag operation starts,
<span id="line863"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>setDragFunc(</span><span></<span class="end-tag">b</span>></span><span></span><span><<span class="start-tag">i</span>></span><span>FunctionName</span><span></<span class="end-tag">i</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>)</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span> sets the function to be permanently called while the item is dragged,
<span id="line864"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>setResizeFunc(</span><span></<span class="end-tag">b</span>></span><span></span><span><<span class="start-tag">i</span>></span><span>FunctionName</span><span></<span class="end-tag">i</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>)</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span> does the same for resize operations with the mouse,
<span id="line865"></span> </span><span><<span class="start-tag">tt</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>setDropFunc(</span><span></<span class="end-tag">b</span>></span><span></span><span><<span class="start-tag">i</span>></span><span>FunctionName</span><span></<span class="end-tag">i</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>)</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">tt</span>></span><span> sets the function to be called when the item is dropped.
<span id="line866"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line867"></span> Example:
<span id="line868"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line869"></span> A statement</span><span><<span class="start-tag">br</span>></span><span>
<span id="line870"></span> </span><span><<span class="start-tag">tt</span>></span><span>dd.elements.someName.setDropFunc(mySomeNameDropFunc);</span><span></<span class="end-tag">tt</span>></span><span>
<span id="line871"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line872"></span> would tell the library to invoke automatically your custom function </span><span><<span class="start-tag">tt</span>></span><span>mySomeNameDropFunc()</span><span></<span class="end-tag">tt</span>></span><span> whenever the item </span><span><<span class="start-tag">tt</span>></span><span><span class="entity"><span>&</span>quot;</span>someName<span class="entity"><span>&</span>quot;</span></span><span></<span class="end-tag">tt</span>></span><span> is dropped.
<span id="line873"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line874"></span> </span><span><<span class="start-tag">b</span>></span><span>3.)</span><span></<span class="end-tag">b</span>></span><span> wz_dragdrop.js is object-oriented. Nobody prevents you from simply </span><span><<span class="start-tag">b</span>></span><span>adding your own properties or even methods</span><span></<span class="end-tag">b</span>></span><span> to the </span><span><<span class="start-tag">tt</span>></span><span>dd.elements</span><span></<span class="end-tag">tt</span>></span><span>, even at runtime.
<span id="line875"></span> Preferably with the prefix my... to avoid conflicts with already predefined properties/methods:
<span id="line876"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line877"></span> </span><span><<span class="start-tag">tt</span>></span><span>dd.elements[i].myProperty = ...;</span><span></<span class="end-tag">tt</span>></span><span>
<span id="line878"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line879"></span> A yet more sofisticated approach to add custom properties is prototyping using the JavaScript keyword </span><span><<span class="start-tag">tt</span>></span><span>prototype</span><span></<span class="end-tag">tt</span>></span><span>:
<span id="line880"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line881"></span> </span><span><<span class="start-tag">tt</span>></span><span>DDObj()</span><span></<span class="end-tag">tt</span>></span><span> is the internal function that creates the draggable objects.
<span id="line882"></span> That means, a statement
<span id="line883"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line884"></span> </span><span><<span class="start-tag">tt</span>></span><span>DDObj.prototype.myNewProperty<span class="entity"><span>&</span>nbsp;</span>=<span class="entity"><span>&</span>nbsp;</span>someValue;</span><span></<span class="end-tag">tt</span>></span><span>
<span id="line885"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line886"></span> would instantly add a new property </span><span><<span class="start-tag">tt</span>></span><span>myNewProperty</span><span></<span class="end-tag">tt</span>></span><span> to </span><span><<span class="start-tag">b</span>></span><span>all</span><span></<span class="end-tag">b</span>></span><span> draggable items, and initialize the property with whichever value </span><span><<span class="start-tag">tt</span>></span><span>someValue</span><span></<span class="end-tag">tt</span>></span><span> has.
<span id="line887"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line888"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line889"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line890"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line891"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line892"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line893"></span> </span><span><<span class="start-tag">p</span>></span><span> <span class="entity"><span>&</span>nbsp;</span> <span class="entity"><span>&</span>nbsp;</span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/dragdrop/api_e.htm#top">#top</a>"></span><span></span><span><<span class="start-tag">img</span> <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/images/topOfPage.gif">../images/topOfPage.gif</a>" <span class="attribute-name">border</span>="<a class="attribute-value">0</a>" <span class="attribute-name">width</span>="<a class="attribute-value">21</a>" <span class="attribute-name">height</span>="<a class="attribute-value">20</a>" <span class="attribute-name">alt</span>="<a class="attribute-value">Top of page</a>"></span><span></span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">p</span>></span><span>
<span id="line894"></span> </span><span><<span class="start-tag">hr</span> <span class="attribute-name">width</span>="<a class="attribute-value">95%</a>" <span class="attribute-name">size</span>="<a class="attribute-value">1</a>" <span class="attribute-name">noshade</span>></span><span>
<span id="line895"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">width</span>="<a class="attribute-value">750</a>"></span><span>
<span id="line896"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line897"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line898"></span> </span><span><<span class="start-tag">small</span>></span><span>Walter Zorn, Munich
<span id="line899"></span> </span><span><<span class="start-tag">br</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.kreuzotter.de/impressum.htm">http://www.kreuzotter.de/impressum.htm</a>"></span><span>Impressum and about this page</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">small</span>></span><span>
<span id="line900"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line901"></span> <span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line902"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line903"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line904"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line905"></span> </span><span></<span class="end-tag">center</span>></span><span>
<span id="line906"></span></span><span></<span class="end-tag">form</span>></span><span>
<span id="line907"></span></span><span><<span class="start-tag">div</span> <span class="attribute-name">id</span>="<a class="attribute-value">greylyr</a>" <span class="attribute-name">style</span>="<a class="attribute-value">position:absolute;left:100px;top:1200px;padding:4px;border:1px solid #000099;background:#dddddd;layer-background-color:#dddddd;visibility:hidden;</a>"></span><span>
<span id="line908"></span> </span><span><<span class="start-tag">small</span>></span><span>This is a draggable layer</span><span></<span class="end-tag">small</span>></span><span>
<span id="line909"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line910"></span> </span><span><<span class="start-tag">img</span> <span class="attribute-name">name</span>="<a class="attribute-value">ko5obersoech</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/images/dragdrop/ko5obersoech.jpg">../images/dragdrop/ko5obersoech.jpg</a>" <span class="attribute-name">width</span>="<a class="attribute-value">100</a>" <span class="attribute-name">height</span>="<a class="attribute-value">55</a>" <span class="attribute-name">alt</span>="<a class="attribute-value"></a>"></span><span>
<span id="line911"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line912"></span> </span><span><<span class="start-tag">img</span> <span class="attribute-name">name</span>="<a class="attribute-value">fateba_fi</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/images/dragdrop/fateba_fi.jpg">../images/dragdrop/fateba_fi.jpg</a>" <span class="attribute-name">width</span>="<a class="attribute-value">130</a>" <span class="attribute-name">height</span>="<a class="attribute-value">103</a>" <span class="attribute-name">alt</span>="<a class="attribute-value"></a>"></span><span>
<span id="line913"></span></span><span></<span class="end-tag">div</span>></span><span>
<span id="line914"></span>
<span id="line915"></span></span><span><<span class="start-tag">div</span> <span class="attribute-name">id</span>="<a class="attribute-value">bluelyr</a>" <span class="attribute-name">style</span>="<a class="attribute-value">position:absolute;left:100px;top:2200px;width:180px;padding:6px;border:1px solid #000099;background:#d6e6ff;layer-background-color:#d6e6ff;visibility:hidden;</a>"></span><span>
<span id="line916"></span> Drag me
<span id="line917"></span></span><span></<span class="end-tag">div</span>></span><span>
<span id="line918"></span>
<span id="line919"></span></span><span><<span class="start-tag">img</span> <span class="attribute-name">name</span>="<a class="attribute-value">button</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/images/dragdrop/button_outset.gif">../images/dragdrop/button_outset.gif</a>" <span class="attribute-name">width</span>="<a class="attribute-value">60</a>" <span class="attribute-name">height</span>="<a class="attribute-value">17</a>" <span class="attribute-name">alt</span>="<a class="attribute-value"></a>"></span><span>
<span id="line920"></span>
<span id="line921"></span></span><span><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"></span><span>
<span id="line922"></span></span><span><!</span><span>--
<span id="line923"></span>
<span id="line924"></span>//if (dd.n4) window.onload = new Function('var orglyr = dd.elements.bluelyr; orglyr.write("</span><span><l</span><span>ayer width=130 height=32></span><span><\</span><span>/layer>");');
<span id="line925"></span>
<span id="line926"></span>SET_DHTML(CURSOR_MOVE, RESIZABLE, SCROLL, "bluelyr", "buoy1"+NO_DRAG, "buoy2"+NO_DRAG, "button"+VERTICAL+HORIZONTAL+CURSOR_DEFAULT, "cat", "counter", "dog", "einstein", "fateba_fi", "fateba_se", "greylyr", "ko5_st", "ko5obersoech", "low", "muckl"+COPY+10, "race", "rex", "upleft");
<span id="line927"></span>
<span id="line928"></span>var iW, low, upleft, dh;
<span id="line929"></span>function ANIM()
<span id="line930"></span>{
<span id="line931"></span> if(!dd.obj || !dd.op6)
<span id="line932"></span> {
<span id="line933"></span> if(low.z</span><span><=</span><span>upleft.z)
<span id="line934"></span> low.maximizeZ();
<span id="line935"></span> upleft.moveTo(
<span id="line936"></span> upleft.x</span><span><=</span><span>-upleft.w? iW-upleft.w-20 : (upleft.x-3),
<span id="line937"></span> (dd.obj==upleft)? upleft.y : (low.y-dh)
<span id="line938"></span> );
<span id="line939"></span> low.moveTo(
<span id="line940"></span> low.x</span><span><=</span><span>-low.w? iW-low.w-20 : (low.x-5),
<span id="line941"></span> upleft.y+dh
<span id="line942"></span> );
<span id="line943"></span> }
<span id="line944"></span> setTimeout("ANIM()", dd.kq? 100 : 50);
<span id="line945"></span>}
<span id="line946"></span>
<span id="line947"></span>
<span id="line948"></span>// override funcs defined within the Lib
<span id="line949"></span>function my_PickFunc()
<span id="line950"></span>{
<span id="line951"></span> if (dd.obj.name == 'button') dd.obj.swapImage(insetbutton.src);
<span id="line952"></span>}
<span id="line953"></span>
<span id="line954"></span>function my_DropFunc()
<span id="line955"></span>{
<span id="line956"></span> if (dd.obj.name == 'button')
<span id="line957"></span> {
<span id="line958"></span> dd.obj.swapImage(outsetbutton.src);
<span id="line959"></span> var minh = dd.elements.button.h+((dd.elements.button.y-dd.elements.fateba_se.y)</span><span><<</span><span></span><span>1</span><span>);
<span id="line960"></span> dd.elements.fateba_se.resizeTo(
<span id="line961"></span> dd.elements.fateba_se.w,
<span id="line962"></span> (dd.elements.fateba_se.h != minh)? minh : parseInt(dd.elements.fateba_se.w*157/200)
<span id="line963"></span> );
<span id="line964"></span> }
<span id="line965"></span>}
<span id="line966"></span>
<span id="line967"></span>
<span id="line968"></span>dd.elements.greylyr.moveTo(dd.elements.buoy1.x, dd.elements.buoy1.y);
<span id="line969"></span>dd.elements.greylyr.show();
<span id="line970"></span>
<span id="line971"></span>dd.elements.bluelyr.moveTo(dd.elements.buoy2.x, dd.elements.buoy2.y);
<span id="line972"></span>dd.elements.bluelyr.show();
<span id="line973"></span>
<span id="line974"></span>var outsetbutton = new Image();
<span id="line975"></span>outsetbutton.src = '../images/dragdrop/button_outset.gif';
<span id="line976"></span>var insetbutton = new Image();
<span id="line977"></span>insetbutton.src = '../images/dragdrop/button_inset.gif';
<span id="line978"></span>
<span id="line979"></span>dd.elements.button.moveTo(dd.elements.fateba_se.x+2, dd.elements.fateba_se.y+2)
<span id="line980"></span>dd.elements.fateba_se.addChild('button');
<span id="line981"></span>
<span id="line982"></span>iW = dd.getWndW();
<span id="line983"></span>low = dd.elements.low;
<span id="line984"></span>upleft = dd.elements.upleft;
<span id="line985"></span>dh = upleft.h-low.h;
<span id="line986"></span>ANIM();
<span id="line987"></span>
<span id="line988"></span>//-->
<span id="line989"></span></span><span></<span class="end-tag">script</span>></span><span>
<span id="line990"></span></span><span></<span class="end-tag">body</span>></span><span>
<span id="line991"></span></span><span></<span class="end-tag">html</span>></span><span>
<span id="line992"></span></span></pre></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