DIR : /home/kozerus/public_html/dd5.html
/home/kozerus/public_html
<html>
<head>
<title>dd5.html 20200331_1130</title>
<!--
-->
<style id="style_dd5" >
div {
margin: 0em;
padding: 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
</style>
<script id="script_dd5" >
function dragstart_handler(ev) {
console.log("dragStart: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);
// Add this element's id to the drag payload so the drop handler will
// know which element to add to its tree
ev.dataTransfer.setData("text", ev.target.id);
ev.dataTransfer.effectAllowed = "move";
}
function drop_handler(ev) {
console.log("drop: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);
ev.preventDefault();
// Get the id of the target and add the moved element to the target's DOM
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
function dragover_handler(ev) {
console.log("dragOver: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);
ev.preventDefault();
// Set the dropEffect to move
ev.dataTransfer.dropEffect = "move"
}
</script>
<script id="script_dd5_dropeffect" >
function dragstart_handler(ev) {
// Add the target element's id to the data transfer object
ev.dataTransfer.setData("application/my-app", ev.target.id);
ev.dataTransfer.dropEffect = "move";
}
function dragover_handler(ev) {
ev.preventDefault();
ev.dataTransfer.dropEffect = "move"
}
function drop_handler(ev) {
ev.preventDefault();
// Get the id of the target and add the moved element to the target's DOM
const data = ev.dataTransfer.getData("application/my-app");
ev.target.appendChild(document.getElementById(data));
}
</script>
<p id="p1" draggable="true" ondragstart="dragstart_handler(event)">This element is draggable.</p>
<div id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Zone</div>
</head>
<body bgcolor="wheat" >
<h1>dd5.html 20200331_1130</h1>
<div>
<img src="/imgs/btn/koeyeb.png" onclice="window.open('\q=koeye'); return false; " height=100 >
<p id="source" ondragstart="dragstart_handler(event);" draggable="true">
<img src="/imgs/btn/koeye.png" onclice="window.open('\q=koeye'); return false; " height=100 >
</p>
<img src="/imgs/btn/koeyew.png" onclice="window.open('\q=koeye'); return false; " height=100 >
</div>
<!--
<div>
<p id="source" ondragstart="dragstart_handler(event);" draggable="true">
<img src="/imgs/btn/koeyeb.png" onclice="window.open('\q=koeyew'); return false; " height=100 >
</p>
</div>
<div>
<p id="source" ondragstart="dragstart_handler(event);" draggable="true">
<img src="/imgs/btn/koeyew.png" onclice="window.open('\?q=koeyeb'); return false; " height=100 >
</p>
</div>
-->
<!--
<img src="/imgs/btn/ko.png" onclice="window.open('\q=ko'); return false; " height=100 draggable="true" >
<img src="/imgs/btn/ok.png" onclice="window.open('\q=ok'); return false; " height=100 draggable="true" >
<img src="/imgs/btn/kob.png" onclice="window.open('\q=kob'); return false; " height=100 draggable="true" >
<img src="/imgs/btn/kow.png" onclice="window.open('\q=kow'); return false; " height=100 draggable="true" >
<img src="/imgs/btn/kib.png" onclice="window.open('\q=kib'); return false; " height=100 draggable="true" >
<img src="/imgs/btn/kiw.png" onclice="window.open('\q=kiw'); return false; " height=100 draggable="true" >
<br>
<img src="/imgs/btn/kop12.png" onclice="window.open('\q=kop12'); return false; " height=100 draggable="true" >
<img src="/imgs/btn/kop23.png" onclice="window.open('\q=kop23'); return false; " height=100 draggable="true" >
<img src="/imgs/btn/kop34.png" onclice="window.open('\q=kop34'); return false; " height=100 draggable="true" >
<img src="/imgs/btn/kop41.png" onclice="window.open('\q=kop41'); return false; " height=100 draggable="true" >
<br>
<img src="/imgs/btn/kop1.png" onclice="window.open('\q=kop1'); return false; " height=100 draggable="true" >
<img src="/imgs/btn/kop2.png" onclice="window.open('\q=kop2'); return false; " height=100 draggable="true" >
<img src="/imgs/btn/kop3.png" onclice="window.open('\q=kop3'); return false; " height=100 draggable="true" >
<img src="/imgs/btn/kop1.png" onclice="window.open('\q=kop1'); return false; " height=100 draggable="true" >
<img src="/imgs/btn/kop4.png" onclice="window.open('\q=kop4'); return false; " height=100 draggable="true" >
-->
<img id="img_target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" src="/imgs/bg/bg_steel_linear.png" width=400 height=100 >
<img id="img_target1" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" src="/imgs/bg/bg_newton06.png" width=400 height=100 >
<img id="img_target2" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" src="/imgs/bg/bg_newton07a.png" width=400 height=100 >
<!--
<img id="img_target3" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" src="/imgs/bg/bg_newton07b.png" width=400 height=100 >
<img id="img_target4" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" src="/imgs/bg/bg_newton08a.png" width=400 height=100 >
<img id="img_target5" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" src="/imgs/bg/bg_newton8b.png" width=400 height=100 >
-->
<br>
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
<div id="target1" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">target1</div>
<div id="target2" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">target2</div>
<div id="target3" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">target3</div>
</body>
</html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer