pgchamberlin/hungryKid.htm

## hungryKid.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Hungry Kid!</title>
<style type="text/css">

#items li {
	list-style: none;
}

.nom {
	font-size: 32pt;
	font-weight: bold;
}

</style>
</head>
<body>
<h1>Hungry Kid!</h1>
<form action="#" type="GET">
	<ul id="items">
		<li id="item1"><input type="checkbox" name="item[1]" /><span>Li 1</span></li>
		<li id="item2"><input type="checkbox" name="item[2]" /><span>Li 2</span></li>
		<li id="item3"><input type="checkbox" name="item[3]" /><span>Li 3</span></li>
		<li id="item4"><input type="checkbox" name="item[4]" /><span>Li 4</span></li>
		<li id="item5"><input type="checkbox" name="item[5]" /><span>Li 5</span></li>
	</ul>
	<input type="submit" value="delete" id="trash" />
</form>
<script type="text/javascript" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
<script type="text/javascript">

/*
Dependencies: node, ddrag, animation
*/

YUI().use('node','io','dd-delegate','dd-drop','animation',function(Y){

	var junkUrls = new Array(
		'http://t2.gstatic.com/images?q=tbn:HiN2JMRoDJ-h8M:http://www.naturalhealthhoodia.com/blog/wp-content/junk-food.jpg',
		'http://t2.gstatic.com/images?q=tbn:4PJ2bJkrhWGL1M:http://www.thegreenhead.com/imgs/junk-food-puzzle-1.jpg',
		'http://t3.gstatic.com/images?q=tbn:m_6X1-di0Gw6JM:http://www.watchingcriminalminds.com/wp-content/uploads/2008/09/junk-food.jpg',
		'http://t2.gstatic.com/images?q=tbn:0cSS_hIr4Z2xjM:http://wwwdelivery.superstock.com/WI/223/1555/PreviewComp/SuperStock_1555R-24034.jpg',
		'http://t3.gstatic.com/images?q=tbn:UhdHhjbv1zX1SM:http://www.fotosearch.com/bthumb/csk/CSK151/KS2701.jpg'
	);

	var items = Y.all('#items li');
	var i = 0;
	items.each(function(e,i){
		e.one('input').setStyle('display', 'none');
		e.one('span').setStyle('display', 'none');
		e.insert('<img src="'+junkUrls[i]+'" alt="Junk food" />', 1);
	});

	var trash = Y.one('#trash');
	trash.setStyle('display', 'none');
	trash.get('parentNode').insert('<div id="trashcan"><img src="http://t1.gstatic.com/images?q=tbn:yt3FWBFZ-Trm5M:http://images.buycostumes.com/mgen/merchandiser/21259.jpg" alt="TRASH CAN!" /></div>');

	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');
        Y.log('You dropped: <strong>' + e.drag.get('node').get('innerHTML') + '</strong>');
		Y.one('#trashcan').insert('<span class="nom" style="color:#'+ Math.floor(Math.random()*16777215).toString(16) +'">Nom! </span>');
    });


	Y.log(drop);

});

</script>
</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">

	<title>Hungry Kid!</title>
	<style type="text/css">

	#items li {
	list-style: none;
	}

	.nom {
	font-size: 32pt;
	font-weight: bold;
	}

	</style>
	</head>
	<body>
	<h1>Hungry Kid!</h1>
	<form action="#" type="GET">
	<ul id="items">
	<li id="item1"><input type="checkbox" name="item[1]" /><span>Li 1</span></li>
	<li id="item2"><input type="checkbox" name="item[2]" /><span>Li 2</span></li>
	<li id="item3"><input type="checkbox" name="item[3]" /><span>Li 3</span></li>
	<li id="item4"><input type="checkbox" name="item[4]" /><span>Li 4</span></li>
	<li id="item5"><input type="checkbox" name="item[5]" /><span>Li 5</span></li>
	</ul>
	<input type="submit" value="delete" id="trash" />
	</form>
	<script type="text/javascript" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
	<script type="text/javascript">

	/*
	Dependencies: node, ddrag, animation
	*/

	YUI().use('node','io','dd-delegate','dd-drop','animation',function(Y){

	var junkUrls = new Array(
	'http://t2.gstatic.com/images?q=tbn:HiN2JMRoDJ-h8M:http://www.naturalhealthhoodia.com/blog/wp-content/junk-food.jpg',
	'http://t2.gstatic.com/images?q=tbn:4PJ2bJkrhWGL1M:http://www.thegreenhead.com/imgs/junk-food-puzzle-1.jpg',
	'http://t3.gstatic.com/images?q=tbn:m_6X1-di0Gw6JM:http://www.watchingcriminalminds.com/wp-content/uploads/2008/09/junk-food.jpg',
	'http://t2.gstatic.com/images?q=tbn:0cSS_hIr4Z2xjM:http://wwwdelivery.superstock.com/WI/223/1555/PreviewComp/SuperStock_1555R-24034.jpg',
	'http://t3.gstatic.com/images?q=tbn:UhdHhjbv1zX1SM:http://www.fotosearch.com/bthumb/csk/CSK151/KS2701.jpg'
	);

	var items = Y.all('#items li');
	var i = 0;
	items.each(function(e,i){
	e.one('input').setStyle('display', 'none');
	e.one('span').setStyle('display', 'none');
	e.insert('<img src="'+junkUrls[i]+'" alt="Junk food" />', 1);
	});

	var trash = Y.one('#trash');
	trash.setStyle('display', 'none');
	trash.get('parentNode').insert('<div id="trashcan"><img src="http://t1.gstatic.com/images?q=tbn:yt3FWBFZ-Trm5M:http://images.buycostumes.com/mgen/merchandiser/21259.jpg" alt="TRASH CAN!" /></div>');

	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');
	Y.log('You dropped: <strong>' + e.drag.get('node').get('innerHTML') + '</strong>');
	Y.one('#trashcan').insert('<span class="nom" style="color:#'+ Math.floor(Math.random()*16777215).toString(16) +'">Nom! </span>');
	});


	Y.log(drop);

	});

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