dd_and_animation.html #1 

<?xml version="1.0" encoding="UTF-8"?>
<html>
 <head>
  <title>WireIt Example, Move and Animate elements containing terminals</title>
  
<!-- Libs -->
<link rel="stylesheet" type="text/css" href="../lib/yui/reset-fonts/reset-fonts.css" /> 
<script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="../lib/excanvas.js"></script>

<!-- WireIt -->
<script type="text/javascript" src="../build/wireit-min.js"></script>
<link rel="stylesheet" type="text/css" href="../assets/WireIt.css" />

<style>

div.blockBox {
	/* WireIt */
	position: absolute;
	z-index: 5;
	opacity: 0.8;
	
	/* Others */
	width: 100px;
	height: 100px;
	background-color: rgb(255,200,200);
	cursor: move;
}

</style>

<script>
window.onload = function() {
	
	// Create 2 terminals into Block1
	var block1 = YAHOO.util.Dom.get('block1');
	var terminals1 = [new WireIt.Terminal(block1, {direction: [-1,0], offsetPosition: [-14,35]}), 
							new WireIt.Terminal(block1, {direction: [1,0], offsetPosition: [85,35]})];
	
	// Make the block1 draggable
	new WireIt.util.DD(terminals1,block1); 
	
	// Create 2 terminals into Block2
	var block2 = YAHOO.util.Dom.get('block2');
	var terminals2 = [new WireIt.Terminal(block2, {direction: [-1,0], offsetPosition: [-14,35]}), 
							new WireIt.Terminal(block2, {direction: [1,0], offsetPosition: [85,35]})];
	
	// Make the block2 draggable
	new WireIt.util.DD(terminals2,block2);
	
	// Create a wire between some terminals
	var w1 = new WireIt.BezierWire(terminals1[0], terminals2[0], document.body);
	w1.redraw();
	
	var w2 = new WireIt.BezierWire(terminals1[1], terminals2[1], document.body);
	w2.redraw();
	
};


</script>

 </head>
 <body>
	
	<p style="margin: 15px;"><a href="../index.html">&lt; Back</a></p>
	<p style="margin: 15px;">Show usage of WireIt.util.DD to make terminal containers draggable</p>
	
	<div id='block1' class="blockBox" style="left: 300px; top: 100px;">Move Me !</div>
	
	<div id='block2' class="blockBox" style="left: 500px; top: 200px;">Move Me !</div>
	
 </body>
</html>
# Change User Description Committed
#1 16445 christiane_renck Rename/move file(s)
//guest/christiane_renck/MergeQuestJS/main/demos/WireIt/examples/dd_and_animation.html
#1 16444 christiane_renck Adding MergeQuestJS to the Workshop.