DIR : /home/kozerus/public_html/ko_center/dragdrop1.html

/home/kozerus/public_html/ko_center

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Drag and Drop</title>
<style type="text/css"><!--
#drop {
 width:200px;
 height:150px;
 margin:3px auto;
 background:#eddaa8;
 font-size:16px;
}
#drop #sw { text-decoration:underline; cursor:pointer; }
#drag {
 width:450px;
 height:180px;
 margin:12px auto;
 border:1px solid silver;
 font-size:16px;
}
#drag .drg { margin:10px 12px; }
#drag div.drg {
 width:150px;
 height:50px;
 background:#07da08;
 border:2px solid blue;
}
--></style>
<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="./js/jquery-ui-1.9.2.custom.js"></script>
// <script type="text/javascript" src="jquery_1.6.1.js"></script>
// <script type="text/javascript" src="jquery-ui-1.8.14.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // sets the draggable
  $('#drag .drg').draggable({
    cursor: 'move',          // sets the cursor apperance
    revert: 'valid'
  });

  // sets droppable
  $('#drop').droppable({
    drop: function(event, ui) {
      // after the draggable is droped, hides it with a hide() effect
      ui.draggable.hide(1000);
    }
  });

  // when the "#sw" element (inside the "#drop") is clicked
  // show the items with class "drg", contained in "#drag"
  $('#drop #sw').click(function(){
    $('#drag .drg').slideDown(1000);
  });
});
--></script>
</head>
<body>

test 20121207_1820
<hr>
<div id="drop">Drop here &nbsp; &nbsp; &nbsp; &nbsp; <span id="sw">Show</span></div>

<div id="drop"> cab_empty <img src="./images/cab/cab_empty.png><span id="sw">Show</span></div>
<div id="drag">
 Drag these images:<br />

 <img src="./images/cab/visix_content_server.png" alt="visix_content_server" width="50" class="drg" />
 <img src="./images/cab/hp_dl585_g2.png" alt="hp_dl585" width="50" class="drg" />
 <img src="./images/cab/hp_rx7640.png" alt="hp_rx7640"  width="50" class="drg" />
 <img src="./images/cab/sun_x4140.png" alt="sun_x4140"  width="50" class="drg" />
 <img src="./images/cab/sunfire_v440.png" alt="sunfire_v440"  width="50" class="drg" />

 <div class="drg">DIV with some content. Click and drag</div>
</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