pgchamberlin · July 13, 2010 15:53
diff --git a/ccasbolt-dragdrop.htm b/ccasbolt-dragdrop.htm
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title>Drag and Drop</title>

 <style type="text/css">
 body {
 margin:15px;
 padding:0;
 }
 </style>

 <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.1.1/build/cssfonts/fonts-min.css" />
 <script type="text/javascript" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>

 <style type="text/css" id="styleoverrides">
 #cal1Cont {
    background-color:#004C6D;
    width: 200px;
 }
 #cal1Cont table tr {
    background-color:#004C6D;
 }

 #cal1Cont div.calheader {
    cursor: move;
 }

 #cal1Cont .yui3-calendar {
    width:auto;
    background-color:transparent;
 }

 #cal1Cont .yui3-calendar tr, #cal1Cont .yui3-calendar th {
    background-color:transparent;
    vertical-align:middle;
    text-transform:none;
    color:#fff;
 }

 #cal1Cont .yui3-calendar a:hover {
    text-decoration:none;
 }

 #results {
    background-color:#8DD5E7;
    border:1px solid black;
    position: absolute;
    top: 15px;
    right: 5px;
    width: 300px;
 }
 </style>

 </head>

 <body class="yui3-skin-sam yui-skin-sam">

 <h1>YUI Drag Drop</h1>
 <form action="#" method="GET">
 <ul id="items">
 	<li id="item1"><input type="checkbox" name="item[1]" />Item One</li>
 	<li id="item2"><input type="checkbox" name="item[2]" />Item Two</li>
 	<li id="item3"><input type="checkbox" name="item[3]" />Item Three</li>

 	<li id="item4"><input type="checkbox" name="item[4]" />Item Four</li>
 	<li id="item5"><input type="checkbox" name="item[5]" />Item Five</li>
 	<li id="item6"><input type="checkbox" name="item[6]" />Item Six</li>
 	<li id="item7"><input type="checkbox" name="item[7]" />Item Seven</li>
 </ul>
 <input type="submit" value="Delete" id="trash" />
 </form>

 <script>

 YUI().use('dd', 'node', 'anim', 'io', function(Y) {
 	var trash = Y.one('#trash');
 	trash.setStyle('display', 'none');
 	trash.get('parentNode').insert('<div id="trashCan"><img src="trash_can.png" alt="Delete" title="Delete" /></div>');

 	trash.set('value', 'empty trash can');

 	Y.one('#trashCan').append(trash);

 	Y.one('#items').setStyles({'float' : 'left'});  
 	Y.one('#trashCan').setStyles({'float' : 'right'});	

 	var del = new Y.DD.Delegate({
 		cont: '#items',
 		nodes: '#items li'
 	});

 	del.on('drag:end', function(e) {
        del.get('currentNode').setStyles({
            top: 0,
            left: 0
        });
    });	

 	var drop = Y.one('#trashCan').plug(Y.Plugin.Drop);

 	drop.drop.on('drop:hit', function(e) {
 		e.drag.get('node').setStyle('display', 'none');
 		e.drag.get('node').get('children').set('checked', true);

 		Y.one('#trash').setStyle('display', 'block');

 		drop.append('<br />' + e.drag.get('node').get('innerHTML'));

 		Y.all('#trashCan input').set('checked', true);
 	});

 });


 </script>
 </body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Drag and Drop</title>

	<style type="text/css">
	body {
	margin:15px;
	padding:0;
	}
	</style>

	<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.1.1/build/cssfonts/fonts-min.css" />
	<script type="text/javascript" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>

	<style type="text/css" id="styleoverrides">
	#cal1Cont {
	background-color:#004C6D;
	width: 200px;
	}
	#cal1Cont table tr {
	background-color:#004C6D;
	}

	#cal1Cont div.calheader {
	cursor: move;
	}

	#cal1Cont .yui3-calendar {
	width:auto;
	background-color:transparent;
	}

	#cal1Cont .yui3-calendar tr, #cal1Cont .yui3-calendar th {
	background-color:transparent;
	vertical-align:middle;
	text-transform:none;
	color:#fff;
	}

	#cal1Cont .yui3-calendar a:hover {
	text-decoration:none;
	}

	#results {
	background-color:#8DD5E7;
	border:1px solid black;
	position: absolute;
	top: 15px;
	right: 5px;
	width: 300px;
	}
	</style>

	</head>

	<body class="yui3-skin-sam yui-skin-sam">

	<h1>YUI Drag Drop</h1>
	<form action="#" method="GET">
	<ul id="items">
	<li id="item1"><input type="checkbox" name="item[1]" />Item One</li>
	<li id="item2"><input type="checkbox" name="item[2]" />Item Two</li>
	<li id="item3"><input type="checkbox" name="item[3]" />Item Three</li>

	<li id="item4"><input type="checkbox" name="item[4]" />Item Four</li>
	<li id="item5"><input type="checkbox" name="item[5]" />Item Five</li>
	<li id="item6"><input type="checkbox" name="item[6]" />Item Six</li>
	<li id="item7"><input type="checkbox" name="item[7]" />Item Seven</li>
	</ul>
	<input type="submit" value="Delete" id="trash" />
	</form>

	<script>

	YUI().use('dd', 'node', 'anim', 'io', function(Y) {
	var trash = Y.one('#trash');
	trash.setStyle('display', 'none');
	trash.get('parentNode').insert('<div id="trashCan"><img src="trash_can.png" alt="Delete" title="Delete" /></div>');

	trash.set('value', 'empty trash can');

	Y.one('#trashCan').append(trash);

	Y.one('#items').setStyles({'float' : 'left'});
	Y.one('#trashCan').setStyles({'float' : 'right'});

	var del = new Y.DD.Delegate({
	cont: '#items',
	nodes: '#items li'
	});

	del.on('drag:end', function(e) {
	del.get('currentNode').setStyles({
	top: 0,
	left: 0
	});
	});

	var drop = Y.one('#trashCan').plug(Y.Plugin.Drop);

	drop.drop.on('drop:hit', function(e) {
	e.drag.get('node').setStyle('display', 'none');
	e.drag.get('node').get('children').set('checked', true);

	Y.one('#trash').setStyle('display', 'block');

	drop.append('<br />' + e.drag.get('node').get('innerHTML'));

	Y.all('#trashCan input').set('checked', true);
	});

	});


	</script>
	</body>
	</html>