pgchamberlin/ccasbolt-dragdrop.htm

## 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>