Unnamed

<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
	<head>
		<title>
			Yahoo! UI Library - Drag and Drop
		</title>
		
		<link rel="stylesheet" type="text/css" href="./css/screen.css">
	</head>
	
	<body>
		
		<script type="text/javascript" src="../../build/yahoo/yahoo-min.js" ></script>
		<script type="text/javascript" src="../../build/event/event-min.js" ></script>
		<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
		<script type="text/javascript" src="../../build/dragdrop/dragdrop-debug.js" ></script>
		<script type="text/javascript" src="js/DDSwap.js" ></script>
		
		<script type="text/javascript" language="JavaScript">
			YAHOO.example.DDApp = function()
			{
			  var dd, dd2, dd3;
				
		    function initPointMode()
				{
	        dd = new YAHOO.example.DDSwap("dragDiv1", "proxytest");
					
	        dd2 = new YAHOO.example.DDSwap("dragDiv2", "proxytest");
					
	        // the third DD instance uses its own proxy element
	        dd3 = new YAHOO.example.DDSwap("dragDiv3", "proxytest",
	                    { dragElId: "dragDiv4", 
	                    centerFrame: true, resizeFrame: false });
		    }
		    
		    return {
					init: function()
					{
		      	initPointMode();
		      }
		      
		    };
		    
			}();
			
			YAHOO.util.Event.addListener(window, "load", YAHOO.example.DDApp.init);
			
		</script>
		
		<style type="text/css">
			#dragDiv1
			{
				background: url(img/sq1.png) 0 0 no-repeat;
				background-color: #6D739A;
				top: 270px;
				left: 105px;
			}
			
			#dragDiv2
			{
				background: url(img/sq2.png) 0 0 no-repeat;
				background-color: #566F4E;
				top: 350px;
				left: 215px;
			}
			
			#dragDiv3
			{
				background: url(img/sq3.png) 0 0 no-repeat;
				background-color: #7E5B60;
				top: 430px;
				left: 325px;
			}
			
			#dragDiv4
			{
				visibility: hidden;
				border: 0px solid black;
				height: 141px;
				width: 160px;
				background-color: #7E5B60;
				top:630px;
				left: 525px;
				height: 50px;
				width: 50px;
			}
		</style>
		
		<div id="dragDiv1" class="testSquare">DDSwap</div>
		<div id="dragDiv2" class="testSquare">DDSwap</div>
		
		<div id="wrapperDiv">
		  <div id="dragDiv3" class="testSquare">DDSwap</div>
		</div>
		
		<div id="dragDiv4" class="testSquare">a custom proxy element</div>

	</body>
	
</html>