DIR : /home/kozerus/public_html/ko_center/dd2.html
/home/kozerus/public_html/ko_center
<html>
<title>dd.html</title>
<head>
<style>
#ko {
background-image: url(images/ko/ko_100.png);
width: 90px;
height: 25px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
}
#ko_drag {
background-color:black;
background-image: url(images/ko/kob.png);
width: 90px;
height: 25px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
}
#ko_drop {
background-color:white;
background-image: url(images/ko/kiw.png);
width: 90px;
height: 20px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
}
#ko_dragdrop {
background-color:black;
background-image: url(images/ko/kib.png);
width: 90;
height: 25;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
}
#ko_dropdrag {
background-color:white;
background-image: url(images/ko/kiw.png);
width: 90;
height: 25;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
}
</style>
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery-ui-1.9.2.custom.js"></script>
<script src="js/jquery.ui.touch-punch.js"></script>
<script>
$(function() {
$("#ko").draggable().droppable().resizable();
$("#ko_drag").draggable();
$("#ko_drop").droppable();
$("#ko_dragdrop").draggable().droppable();
$("#ko_dropdrag").droppable().draggable();
$( "#ko" ).droppable({
drop: function( event, ui ) {
var draggable_id = $(ui.draggable).attr('id');
var droppable_id = $(this).attr('id');
var url= "https://ka6/ko_center/ko_center.php?q=jqui/ko/"+ droppable_id + "/"+ draggable_id;
// alert( "droppaable: " + draggable_id + " drop=" + droppable_id );
alert( "ko: " + url );
// window.location = "url";
}
});
$( "#ko_drag" ).droppable({
drop: function( event, ui ) {
var draggable_id = $(ui.draggable).attr('id');
var droppable_id = $(this).attr('id');
var url= "https://ka6/ko_center/ko_center.php?q=jqui/ko_drag/"+ droppable_id + "/"+ draggable_id;
// alert( "droppaable: " + draggable_id + " drop=" + droppable_id );
alert( "ko_drag: " + url );
// window.location = "url";
}
});
$( "#ko_drop" ).droppable({
drop: function( event, ui ) {
var draggable_id = $(ui.draggable).attr('id');
var droppable_id = $(this).attr('id');
var url= "https://ka6/ko_center/ko_center.php?q=jqui/ko_drop/"+ droppable_id + "/"+ draggable_id;
// alert( "droppaable: " + draggable_id + " drop=" + droppable_id );
alert( "ko_drop: " + url );
// window.location = "url";
}
});
$( "#ko_dragdrop" ).droppable({
drop: function( event, ui ) {
var draggable_id = $(ui.draggable).attr('id');
var droppable_id = $(this).attr('id');
var url= "https://ka6/ko_center/ko_center.php?q=jqui/ko_drop/"+ droppable_id + "/"+ draggable_id;
// alert( "droppaable: " + draggable_id + " drop=" + droppable_id );
alert( "ko_dragdrop: " + url );
// window.location = "url";
}
});
$( "#ko_dropdrag" ).droppable({
drop: function( event, ui ) {
var draggable_id = $(ui.draggable).attr('id');
var droppable_id = $(this).attr('id');
var url= "https://ka6/ko_center/ko_center.php?q=jqui/ko_drop/"+ droppable_id + "/"+ draggable_id;
// alert( "droppaable: " + draggable_id + " drop=" + droppable_id );
alert( "drop: " + url );
// window.location = "url";
}
});
});
</script>
<!--
// <script type="text/javascript">
// $(function() {
// $("#ko_drag").draggable();
// var dropOpts = {
// accept:"#drag",
// drop:dropCallback,
// greedy:true
// };
// function dropCallback(e) {
// alert("The firing droppable was " + e.target.id);
// }
// $(".target").droppable(dropOpts);
// });
// </script>
-->
</head>
<body bgcolor=lightblue>
<div id="ko">ko</div>
   
<div id="ko_drag">ko_drag</div>
   
<div id="ko_drop">ko_drop</div>
   
<div id="ko_dragdrop">ko_dragdrop</div>
   
<div id="ko_dropdrag">ko_dropdrag</div>
<hr>
<div id="ko_dragdrop"><img src=images/ko/ko.png width="25%"></div>
<hr>
</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