DIR : /home/kozerus/public_html/wz/wz_drop.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">content-type</a>" <span class="attribute-name">content</span>="<a class="attribute-value">text/html; charset=iso-8859-1</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">imagetoolbar</a>" <span class="attribute-name">CONTENT</span>="<a class="attribute-value">no</a>"></span><span>
<span id="line6"></span></span><span><<span class="start-tag">title</span>></span><span>Drag<span class="entity"><span>&</span>amp;</span>Drop</span><span></<span class="end-tag">title</span>></span><span>
<span id="line7"></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="line8"></span></span><span><<span class="start-tag">style</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/css</a>"></span><span>
<span id="line9"></span></span><span><</span><span>!--
<span id="line10"></span>body {
<span id="line11"></span> padding:40px;
<span id="line12"></span>}
<span id="line13"></span>-->
<span id="line14"></span></span><span></<span class="end-tag">style</span>></span><span>
<span id="line15"></span></span><span></<span class="end-tag">head</span>></span><span>
<span id="line16"></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="line17"></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="line18"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line19"></span> </span><span><<span class="start-tag">h3</span> <span class="attribute-name">align</span>="<a class="attribute-value">center</a>"></span><span>Tracking images</span><span></<span class="end-tag">h3</span>></span><span>
<span id="line20"></span> </span><span><<span class="start-tag">p</span> <span class="attribute-name">align</span>="<a class="attribute-value">center</a>"></span><span>
<span id="line21"></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/tooltip/kreuzot_s.jpg">../../images/tooltip/kreuzot_s.jpg</a>" <span class="attribute-name">name</span>="<a class="attribute-value">kreuzotter</a>" <span class="attribute-name">width</span>="<a class="attribute-value">300</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="line22"></span> </span><span></<span class="end-tag">p</span>></span><span>
<span id="line23"></span> </span><span><<span class="start-tag">p</span> <span class="attribute-name">align</span>="<a class="attribute-value">center</a>"></span><span>
<span id="line24"></span> Drag these images around...
<span id="line25"></span> </span><span></<span class="end-tag">p</span>></span><span>
<span id="line26"></span> </span><span><<span class="start-tag">p</span> <span class="attribute-name">align</span>="<a class="attribute-value">center</a>"></span><span>
<span id="line27"></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/dragdrop/norway.jpg">../../images/dragdrop/norway.jpg</a>" <span class="attribute-name">name</span>="<a class="attribute-value">nordland</a>" <span class="attribute-name">width</span>="<a class="attribute-value">280</a>" <span class="attribute-name">height</span>="<a class="attribute-value">210</a>" <span class="attribute-name">alt</span>="<a class="attribute-value"></a>"></span><span>
<span id="line28"></span> </span><span></<span class="end-tag">p</span>></span><span>
<span id="line29"></span> </span><span><<span class="start-tag">p</span> <span class="attribute-name">align</span>="<a class="attribute-value">center</a>"></span><span>
<span id="line30"></span> When using </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>wz_dragdrop.js</span><span></<span class="end-tag">a</span>></span><span>, just a few additional JS lines are necessary to create this effect.
<span id="line31"></span> </span><span></<span class="end-tag">p</span>></span><span>
<span id="line32"></span> </span><span><<span class="start-tag">p</span>></span><span>
<span id="line33"></span> The formular below demonstrates how to use my_DropFunc() to write properties of a dropped item into form elements, e.g. in order to transmit these values to the server.
<span id="line34"></span> Of course, you might consider <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>s to be more appropriate to store data temporarily.
<span id="line35"></span> </span><span></<span class="end-tag">p</span>></span><span>
<span id="line36"></span> </span><span><<span class="start-tag">form</span> <span class="attribute-name">name</span>="<a class="attribute-value">myForm</a>"></span><span>
<span id="line37"></span> </span><span><<span class="start-tag">center</span>></span><span>
<span id="line38"></span> </span><span><<span class="start-tag">table</span>></span><span>
<span id="line39"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line40"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span>name = </span><span></<span class="end-tag">td</span>></span><span>
<span id="line41"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">NAME</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">12</a>"></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line42"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span><span class="entity"><span>&</span>nbsp;</span><span class="entity"><span>&</span>nbsp;</span>x = </span><span></<span class="end-tag">td</span>></span><span>
<span id="line43"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">X</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">12</a>"></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line44"></span> </span><span><<span class="start-tag">td</span> <span class="attribute-name">align</span>="<a class="attribute-value">right</a>"></span><span><span class="entity"><span>&</span>nbsp;</span><span class="entity"><span>&</span>nbsp;</span>y = </span><span></<span class="end-tag">td</span>></span><span>
<span id="line45"></span> </span><span><<span class="start-tag">td</span>></span><span></span><span><<span class="start-tag">input</span> <span class="attribute-name">name</span>="<a class="attribute-value">Y</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text</a>" <span class="attribute-name">size</span>="<a class="attribute-value">12</a>"></span><span></span><span></<span class="end-tag">td</span>></span><span>
<span id="line46"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line47"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line48"></span> </span><span></<span class="end-tag">center</span>></span><span>
<span id="line49"></span> </span><span></<span class="end-tag">form</span>></span><span>
<span id="line50"></span> </span><span><<span class="start-tag">p</span> <span class="attribute-name">align</span>="<a class="attribute-value">center</a>"></span><span>
<span id="line51"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line52"></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.htm</a>" <span class="attribute-name">target</span>="<a class="attribute-value">_top</a>"></span><span>Back to Examples with wz_dragdrop.js</span><span></<span class="end-tag">a</span>></span><span>
<span id="line53"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line55"></span> </span><span></<span class="end-tag">p</span>></span><span>
<span id="line56"></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="line57"></span></span><span><!</span><span>--
<span id="line58"></span>SET_DHTML(CURSOR_MOVE, TRANSPARENT, "kreuzotter", "nordland");
<span id="line59"></span>
<span id="line60"></span>// The following loop creates a copy for each of the two images,
<span id="line61"></span>// but hides that copy immediately while the page is still loading
<span id="line62"></span>for (var i = 0; i </span><span>< </span><span>2; i++)
<span id="line63"></span>{
<span id="line64"></span> dd.elements[i].copy();
<span id="line65"></span> dd.elements[i].copies[0].hide();
<span id="line66"></span>}
<span id="line67"></span>
<span id="line68"></span>// The following two functions override their empty namesakes predefined in wz_dragdrop.js.
<span id="line69"></span>// They are automatically invoked from wz_dragdrop.js when a drag operation starts
<span id="line70"></span>// and ends, respectively.
<span id="line71"></span>
<span id="line72"></span>// Here we make the non-transparent 'placeholder' copy of the dragged image visible
<span id="line73"></span>// and move it to the place where the drag operation starts
<span id="line74"></span>function my_PickFunc()
<span id="line75"></span>{
<span id="line76"></span> dd.obj.copies[0].moveTo(dd.obj.x, dd.obj.y);
<span id="line77"></span> dd.obj.copies[0].show();
<span id="line78"></span>}
<span id="line79"></span>
<span id="line80"></span>// Here we hide the 'placeholder' again
<span id="line81"></span>function my_DropFunc()
<span id="line82"></span>{
<span id="line83"></span> dd.obj.copies[0].hide();
<span id="line84"></span>
<span id="line85"></span> // Write the name and coordinates of the dropped item into form inputs:
<span id="line86"></span> document.myForm.NAME.value = dd.obj.name;
<span id="line87"></span> document.myForm.X.value = dd.obj.x;
<span id="line88"></span> document.myForm.Y.value = dd.obj.y;
<span id="line89"></span>}
<span id="line90"></span>//-->
<span id="line91"></span></span><span></<span class="end-tag">script</span>></span><span>
<span id="line92"></span></span><span></<span class="end-tag">body</span>></span><span>
<span id="line93"></span></span><span></<span class="end-tag">html</span>></span><span>
<span id="line94"></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