Loading...
Helix SwarmHelix Swarm
Loading...

dd_and_animation.html

  • //
  • guest/
  • christiane_renck/
  • mergequestjs/
  • main/
  • demos/
  • WireIt/
  • examples/
  • dd_and_animation.html #1
  • View
  • Commits
  • Open Download .zip Download (2 KB) 
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <html>
  3.  <head>
  4.   <title>WireIt Example, Move and Animate elements containing terminals</title>
  5.   
  6. <!-- Libs -->
  7. <link rel="stylesheet" type="text/css" href="../lib/yui/reset-fonts/reset-fonts.css" /> 
  8. <script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script>
  9. <script type="text/javascript" src="../lib/excanvas.js"></script>
  10.  
  11. <!-- WireIt -->
  12. <script type="text/javascript" src="../build/wireit-min.js"></script>
  13. <link rel="stylesheet" type="text/css" href="../assets/WireIt.css" />
  14.  
  15. <style>
  16.  
  17. div.blockBox {
  18. 	/* WireIt */
  19. 	position: absolute;
  20. 	z-index: 5;
  21. 	opacity: 0.8;
  22. 	
  23. 	/* Others */
  24. 	width: 100px;
  25. 	height: 100px;
  26. 	background-color: rgb(255,200,200);
  27. 	cursor: move;
  28. }
  29.  
  30. </style>
  31.  
  32. <script>
  33. window.onload = function() {
  34. 	
  35. 	// Create 2 terminals into Block1
  36. 	var block1 = YAHOO.util.Dom.get('block1');
  37. 	var terminals1 = [new WireIt.Terminal(block1, {direction: [-1,0], offsetPosition: [-14,35]}), 
  38. 							new WireIt.Terminal(block1, {direction: [1,0], offsetPosition: [85,35]})];
  39. 	
  40. 	// Make the block1 draggable
  41. 	new WireIt.util.DD(terminals1,block1); 
  42. 	
  43. 	// Create 2 terminals into Block2
  44. 	var block2 = YAHOO.util.Dom.get('block2');
  45. 	var terminals2 = [new WireIt.Terminal(block2, {direction: [-1,0], offsetPosition: [-14,35]}), 
  46. 							new WireIt.Terminal(block2, {direction: [1,0], offsetPosition: [85,35]})];
  47. 	
  48. 	// Make the block2 draggable
  49. 	new WireIt.util.DD(terminals2,block2);
  50. 	
  51. 	// Create a wire between some terminals
  52. 	var w1 = new WireIt.BezierWire(terminals1[0], terminals2[0], document.body);
  53. 	w1.redraw();
  54. 	
  55. 	var w2 = new WireIt.BezierWire(terminals1[1], terminals2[1], document.body);
  56. 	w2.redraw();
  57. 	
  58. };
  59.  
  60.  
  61. </script>
  62.  
  63.  </head>
  64.  <body>
  65. 	
  66. 	<p style="margin: 15px;"><a href="../index.html">&lt; Back</a></p>
  67. 	<p style="margin: 15px;">Show usage of WireIt.util.DD to make terminal containers draggable</p>
  68. 	
  69. 	<div id='block1' class="blockBox" style="left: 300px; top: 100px;">Move Me !</div>
  70. 	
  71. 	<div id='block2' class="blockBox" style="left: 500px; top: 200px;">Move Me !</div>
  72. 	
  73.  </body>
  74. </html>
# Change User Description Committed
#1 16445 christiane_renck Rename/move file(s) 9 years ago
//guest/christiane_renck/MergeQuestJS/main/demos/WireIt/examples/dd_and_animation.html
#1 16444 christiane_renck Adding MergeQuestJS to the Workshop. 9 years ago