Side navigation
    Ticket #1666: animationRefresh.html
  
  
  
    File animationRefresh.html, 1.3 KB (added by dannyd, September 19, 2007 01:31AM UTC)
    
  
  
    
      
      <html>
<head>
  <script type="text/javascript" src="scripts/jquery-1.2.1.js"></script>
  <script type="text/javascript" src="scripts/ui.mouse.js"></script>
  <script type="text/javascript" src="scripts/ui.draggable.js"></script>
  <script type="text/javascript" src="scripts/ui.draggable.ext.js"></script>
  <script type="text/javascript" src="scripts/ui.droppable.js"></script>
  <script type="text/javascript" src="scripts/ui.droppable.ext.js"></script>
  <script type="text/javascript">
	$(document).ready(function(){
		$('.drop').droppable({
			accept: '.drag',
			drop: function(){alert("dropped!")},
			activate: function(){$('.drop').animate({left: '+=400'}, 300);},
			deactivate: function(){$('.drop').animate({left: '-=400'}, 300);}
		});
		$('.drag').draggable({
			revert: true,
			zIndex: 1000
		});
	});
  </script>
  <style>
.drag {
   position: absolute;
   border: 2px solid #0090DF;
   background-color: #68BFEF;
   left: 50px;
   top: 50px;
   width: 150px; 
   height: 70px;
   margin: 10px; 
}.drop{
   position: relative;
   border: 2px solid #0090DF;
   background-color: #68BFEF;
   left: 300px;
   top: 50px;
   width: 170px; 
   height: 170px;
   margin: 0px; 
}
</style>
</head>
<body>
<div class="drag"></div>
<div class="drop"></div>
</body>
</html>
    
  
  
    Download in other formats:
    Original Format
  
File animationRefresh.html, 1.3 KB (added by dannyd, September 19, 2007 01:31AM UTC)
<html>
<head>
  <script type="text/javascript" src="scripts/jquery-1.2.1.js"></script>
  <script type="text/javascript" src="scripts/ui.mouse.js"></script>
  <script type="text/javascript" src="scripts/ui.draggable.js"></script>
  <script type="text/javascript" src="scripts/ui.draggable.ext.js"></script>
  <script type="text/javascript" src="scripts/ui.droppable.js"></script>
  <script type="text/javascript" src="scripts/ui.droppable.ext.js"></script>
  <script type="text/javascript">
	$(document).ready(function(){
		$('.drop').droppable({
			accept: '.drag',
			drop: function(){alert("dropped!")},
			activate: function(){$('.drop').animate({left: '+=400'}, 300);},
			deactivate: function(){$('.drop').animate({left: '-=400'}, 300);}
		});
		$('.drag').draggable({
			revert: true,
			zIndex: 1000
		});
	});
  </script>
  <style>
.drag {
   position: absolute;
   border: 2px solid #0090DF;
   background-color: #68BFEF;
   left: 50px;
   top: 50px;
   width: 150px; 
   height: 70px;
   margin: 10px; 
}.drop{
   position: relative;
   border: 2px solid #0090DF;
   background-color: #68BFEF;
   left: 300px;
   top: 50px;
   width: 170px; 
   height: 170px;
   margin: 0px; 
}
</style>
</head>
<body>
<div class="drag"></div>
<div class="drop"></div>
</body>
</html>