eduardolundgren · June 22, 2012 14:11
diff --git a/gistfile1.js b/gistfile1.js
 <html>
 <head>
 	<title></title>

 	<script src="http://yui.yahooapis.com/3.6.0pr2/build/simpleyui/simpleyui-min.js" type="text/javascript" charset="utf-8"></script>

 	<style>
 		.box {
 			width: 200px;
 			height: 100px;
 			background: red;
 			margin: 2px;
 			position: fixed;
 			left: 1710px;
 		}

 		.box.box1 {
 			top: 0px;
 		}

 		.box.box2 {
 			top: 105px;
 			height: 300px;
 		}

 		.box.box3 {
 			top: 410px;
 		}

 		.box.box4 {
 			left: 1505px;
 			top: 0;
 		}
 	</style>
 </head>
 <body>

 <div class="box box1">1</div>
 <div class="box box2">2</div>
 <div class="box box3">3</div>
 <div class="box box4">4</div>

 <script>
 	var regions = {},

 		boxes = Y.all('.box')._nodes,

 		removeItem = function(array, item) {
 			array.splice(array.indexOf(item), 1);
 			return array;
 		},

 		flag = function(n) {
 			return Y.DOM.generateID(n.nodeType ? n : n._node);
 		},

 		move = function(node, r) {
 			node.transition({
 				top: r.top + 'px',
 				left: r.left + 'px'
 			});
 		},

 		moveNodes = function() {
 			for (var i in regions) {
 				move(Y.one('#' + i), regions[i]);
 			}
 		},

 		syncRegions = function(box) {
 			var index = boxes.indexOf(box._node);

 			for (var i = boxes.length-1; i >= index; i--) {
 				var curBox = Y.one(boxes[i]),
 					prevBox = Y.one(boxes[i-1]);

 				if (prevBox) {
 					var prevReg = regions[flag(prevBox)],
 						curReg = regions[flag(curBox)],
 						delta = prevReg.height - curReg.height;

 					if (delta > 0) {
 						curReg.top -= delta;
 					}

 					regions[flag(curBox)] = prevReg;
 				}
 			}
 		};

 	boxes.forEach(function(n) {
 		regions[flag(n)] = Y.one(n).get('region');
 	});

 	Y.one('body').delegate('click', function(event) {
 		var box = event.currentTarget;

 		box.transition(
 			{
 				opacity: 0
 			},
 			function() {
 				syncRegions(box);
 				moveNodes();
 				removeItem(boxes, this._node);
 				delete regions[flag(this)];

 				this.remove();
 			}
 		);
 	}, '.box');
 </script>

 </body>
 </html>
	<html>
	<head>
	<title></title>

	<script src="http://yui.yahooapis.com/3.6.0pr2/build/simpleyui/simpleyui-min.js" type="text/javascript" charset="utf-8"></script>

	<style>
	.box {
	width: 200px;
	height: 100px;
	background: red;
	margin: 2px;
	position: fixed;
	left: 1710px;
	}

	.box.box1 {
	top: 0px;
	}

	.box.box2 {
	top: 105px;
	height: 300px;
	}

	.box.box3 {
	top: 410px;
	}

	.box.box4 {
	left: 1505px;
	top: 0;
	}
	</style>
	</head>
	<body>

	<div class="box box1">1</div>
	<div class="box box2">2</div>
	<div class="box box3">3</div>
	<div class="box box4">4</div>

	<script>
	var regions = {},

	boxes = Y.all('.box')._nodes,

	removeItem = function(array, item) {
	array.splice(array.indexOf(item), 1);
	return array;
	},

	flag = function(n) {
	return Y.DOM.generateID(n.nodeType ? n : n._node);
	},

	move = function(node, r) {
	node.transition({
	top: r.top + 'px',
	left: r.left + 'px'
	});
	},

	moveNodes = function() {
	for (var i in regions) {
	move(Y.one('#' + i), regions[i]);
	}
	},

	syncRegions = function(box) {
	var index = boxes.indexOf(box._node);

	for (var i = boxes.length-1; i >= index; i--) {
	var curBox = Y.one(boxes[i]),
	prevBox = Y.one(boxes[i-1]);

	if (prevBox) {
	var prevReg = regions[flag(prevBox)],
	curReg = regions[flag(curBox)],
	delta = prevReg.height - curReg.height;

	if (delta > 0) {
	curReg.top -= delta;
	}

	regions[flag(curBox)] = prevReg;
	}
	}
	};

	boxes.forEach(function(n) {
	regions[flag(n)] = Y.one(n).get('region');
	});

	Y.one('body').delegate('click', function(event) {
	var box = event.currentTarget;

	box.transition(
	{
	opacity: 0
	},
	function() {
	syncRegions(box);
	moveNodes();
	removeItem(boxes, this._node);
	delete regions[flag(this)];

	this.remove();
	}
	);
	}, '.box');
	</script>

	</body>
	</html>