<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<link href='lib/http _johnny.github.io_jquery-sortable_css_application.css' rel='stylesheet'>
</head>

<body>
	<div id="serialize_output"></div>
	<div class='span4'>
    <ol class='limited_drop_targets vertical'>
      <li class="highlight">Item 1</li>
      <li class="highlight">Item 2</li>
      <li class="highlight">Item 3</li>
      <li class="highlight">Item 4</li>
      <li class="highlight">Item 5</li>
      <li class="highlight">Item 6</li>
    </ol>
  </div>
	<script src="lib/jquery-1.11.0.min.js"></script> 
	<script src='lib/jquery-sortable.js'></script>
	<script>
	var group = $("ol.limited_drop_targets").sortable({
		group: 'limited_drop_targets',
		isValidTarget: function  ($item, container) {
			if($item.is(".highlight")){
				return true;
			}else{
				return $item.parent("ol")[0] == container.el[0];
			}
		},
		onDrop: function ($item, container, _super) {
			$('#serialize_output').text(group.sortable("serialize").get().join("\n"));
			alert(group.sortable("serialize").get().join("\n"));
			_super($item, container);
		},
		serialize: function(parent,children,isContainer){
			return isContainer ? children.join() : parent.text();
		},
		tolerance: 6,
		distance: 10
	});
</script>
</body>
</html>
