woeye/yui_dnd_sample.html

## yui_dnd_sample.html
<!DOCTYPE html>

<html>
<head>
	<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
	<style>
		.wrapper {
			position: relative;
			width: 300px;
			border: 1px solid #555;
		}

		.block {
			height: 100px;
			margin: 10px;
		}

		.red {
			background-color: red;
		}

		.yellow {
			background-color: yellow;
		}

		.green {
			background-color: green;
		}
	</style>
	</head>
</head>

<body>
	<div class="wrapper">
		<div class="block red"></div>
		<div class="block yellow"></div>
		<div class="block green"></div>
	</div>

	<script>
		YUI().use('node', 'dd-constrain', 'dd-proxy', 'dd-drop', function(Y) {
			var wrapper = Y.one('.wrapper');
			var draggingUp = false;
			var lastY = 0;
			Y.all('.block').each(function(block) {
				var dd = new Y.DD.Drag({
					node: block,
					target: true // Make it a drop target, too
				}).plug(Y.Plugin.DDConstrained, {
					constrain2node: wrapper
				}).plug(Y.Plugin.DDProxy, {
					moveOnEnd: false,
					cloneNode: true
				});
				dd.on('drag:start', function(e) {
					var drag = e.target;
					drag.get('node').setStyle('opacity', '.25');
					drag.get('dragNode').setStyle('opacity', '.7');
				});
				dd.on('drag:drag', function(e) {
					var y = e.target.lastXY[1];
					draggingUp = (y < lastY);
					lastY = y;
				});
				dd.on('drag:end', function(e) {
					var drag = e.target;
					drag.get('node').setStyle('opacity', '1');
				});
				dd.on('drag:over', function(e) {
					console.log('drop over!');
					var drag = e.drag.get('node'),
						drop = e.drop.get('node');
					drop.insert(drag, draggingUp ? 'before' : 'after');
					e.drop.sizeShim();
				});
			});
		});
	</script>
</body>

</html>
	<!DOCTYPE html>

	<html>
	<head>
	<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
	<style>
	.wrapper {
	position: relative;
	width: 300px;
	border: 1px solid #555;
	}

	.block {
	height: 100px;
	margin: 10px;
	}

	.red {
	background-color: red;
	}

	.yellow {
	background-color: yellow;
	}

	.green {
	background-color: green;
	}
	</style>
	</head>
	</head>

	<body>
	<div class="wrapper">
	<div class="block red"></div>
	<div class="block yellow"></div>
	<div class="block green"></div>
	</div>

	<script>
	YUI().use('node', 'dd-constrain', 'dd-proxy', 'dd-drop', function(Y) {
	var wrapper = Y.one('.wrapper');
	var draggingUp = false;
	var lastY = 0;
	Y.all('.block').each(function(block) {
	var dd = new Y.DD.Drag({
	node: block,
	target: true // Make it a drop target, too
	}).plug(Y.Plugin.DDConstrained, {
	constrain2node: wrapper
	}).plug(Y.Plugin.DDProxy, {
	moveOnEnd: false,
	cloneNode: true
	});
	dd.on('drag:start', function(e) {
	var drag = e.target;
	drag.get('node').setStyle('opacity', '.25');
	drag.get('dragNode').setStyle('opacity', '.7');
	});
	dd.on('drag:drag', function(e) {
	var y = e.target.lastXY[1];
	draggingUp = (y < lastY);
	lastY = y;
	});
	dd.on('drag:end', function(e) {
	var drag = e.target;
	drag.get('node').setStyle('opacity', '1');
	});
	dd.on('drag:over', function(e) {
	console.log('drop over!');
	var drag = e.drag.get('node'),
	drop = e.drop.get('node');
	drop.insert(drag, draggingUp ? 'before' : 'after');
	e.drop.sizeShim();
	});
	});
	});
	</script>
	</body>

	</html>