DIR : /home/kozerus/public_html/ko_center/dd5.html
/home/kozerus/public_html/ko_center
<html>
<title>dd.html</title>
<head>
function head_jqui_css($options) {
$output .= "<style>\n";
$output .= "#ko { \n";
$output .= " background-image: url(images/ko/ko_100.png); \n";
$output .= " width: 90px; \n";
$output .= " height: 25px; \n";
$output .= " padding: 0.5em; \n";
$output .= " float: left; \n";
$output .= " margin: 10px 10px 10px 0; \n";
$output .= " }\n";
$output .= "#ko_drag { \n";
$output .= " background-color:black; \n";
$output .= " background-image: url(images/ko/kob.png); \n";
$output .= " width: 90px; \n";
$output .= " height: 25px; \n";
$output .= " padding: 0.5em; \n";
$output .= " float: left; \n";
$output .= " margin: 10px 10px 10px 0; \n";
$output .= " }\n";
$output .= "#ko_drop { \n";
$output .= " background-color:white; \n";
$output .= " background-image: url(images/ko/kiw.png); \n";
$output .= " width: 90px; \n";
$output .= " height: 20px; \n";
$output .= " padding: 0.5em; \n";
$output .= " float: left; \n";
$output .= " margin: 10px 10px 10px 0; \n";
$output .= " }\n";
$output .= "#ko_dragdrop { \n";
$output .= " background-color:black; \n";
$output .= " background-image: url(images/ko/kib.png); \n";
$output .= " width: 90; \n";
$output .= " height: 25; \n";
$output .= " padding: 0.5em; \n";
$output .= " float: left; \n";
$output .= " margin: 10px 10px 10px 0; \n";
$output .= " }\n";
$output .= "#ko_dropdrag { \n";
$output .= " background-color:white; \n";
$output .= " background-image: url(images/ko/kiw.png); \n";
$output .= " width: 90; \n";
$output .= " height: 25; \n";
$output .= " padding: 0.5em; \n";
$output .= " float: left; \n";
$output .= " margin: 10px 10px 10px 0; \n";
$output .= " }\n";
$output .= "</style>\n";
}
<script src="js/jquery-1.8.3.js"></script>\n";
<script src="js/jquery-ui-1.9.2.custom.js"></script>
<script src="js/jquery.ui.touch-punch.js"></script>
<script>
// assume that html_string is a valid string
// containing some element you want to be draggable
// which needs to be added to the DOM
//
function addItemToUIList (list, html_string) {
var item = $(list).append (html_string);
// now, using jqui and touch-punch, we can make it draggable
item.draggable ();
}
</script>
<script>
(function ($) {
// Detect touch support
$.support.touch = 'ontouchend' in document;
// Ignore browsers without touch support
if (!$.support.touch) {
return;
}
var mouseProto = $.ui.mouse.prototype,
_mouseInit = mouseProto._mouseInit,
touchHandled;
function simulateMouseEvent (event, simulatedType) { //use this function to simulate mouse event
// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
return;
}
event.preventDefault(); //use this to prevent scrolling during ui use
var touch = event.originalEvent.changedTouches[0],
simulatedEvent = document.createEvent('MouseEvents');
// Initialize the simulated mouse event using the touch event's coordinates
simulatedEvent.initMouseEvent(
simulatedType, // type
true, // bubbles
true, // cancelable
window, // view
1, // detail
touch.screenX, // screenX
touch.screenY, // screenY
touch.clientX, // clientX
touch.clientY, // clientY
false, // ctrlKey
false, // altKey
false, // shiftKey
false, // metaKey
0, // button
null // relatedTarget
);
// Dispatch the simulated event to the target element
event.target.dispatchEvent(simulatedEvent);
}
mouseProto._touchStart = function (event) {
var self = this;
// Ignore the event if another widget is already being handled
if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) {
return;
}
// Set the flag to prevent other widgets from inheriting the touch event
touchHandled = true;
// Track movement to determine if interaction was a click
self._touchMoved = false;
// Simulate the mouseover event
simulateMouseEvent(event, 'mouseover');
// Simulate the mousemove event
simulateMouseEvent(event, 'mousemove');
// Simulate the mousedown event
simulateMouseEvent(event, 'mousedown');
};
mouseProto._touchMove = function (event) {
// Ignore event if not handled
if (!touchHandled) {
return;
}
// Interaction was not a click
this._touchMoved = true;
// Simulate the mousemove event
simulateMouseEvent(event, 'mousemove');
};
mouseProto._touchEnd = function (event) {
// Ignore event if not handled
if (!touchHandled) {
return;
}
// Simulate the mouseup event
simulateMouseEvent(event, 'mouseup');
// Simulate the mouseout event
simulateMouseEvent(event, 'mouseout');
// If the touch interaction did not move, it should trigger a click
if (!this._touchMoved) {
// Simulate the click event
simulateMouseEvent(event, 'click');
}
// Unset the flag to allow other widgets to inherit the touch event
touchHandled = false;
};
mouseProto._mouseInit = function () {
var self = this;
// Delegate the touch handlers to the widget's element
self.element
.on('touchstart', $.proxy(self, '_touchStart'))
.on('touchmove', $.proxy(self, '_touchMove'))
.on('touchend', $.proxy(self, '_touchEnd'));
// Call the original $.ui.mouse init method
_mouseInit.call(self);
};
})(jQuery);
</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 () {
$(".draggable").draggable({ containment: '#imageboundary', axis: "x" });
$("#droppable").droppable({
drop: function (event, ui) {
$.ajax({
type: "POST",
url: 'https://10.5.50.106/ko_center/ko_center.php/jqui/' + $(ui.draggable).attr("id") ,
success: function (data) {
$('.result').html(data);
}
});
}
});
});
</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