js sortable() test

by Laurens Maneschijn

HTML

<a target="_blank" href="http://api.jqueryui.com/sortable/">http://api.jqueryui.com/sortable/</a><br>

<div class="sortable_items">
	<div class="sortable_item"> <span class="sortable_handle">sort</span> 1 </div>
	<div class="sortable_item"> <span class="sortable_handle">sort</span> 2 </div>
	<div class="sortable_item"> <span class="sortable_handle">sort</span> 3 </div>
	<div class="sortable_item"> <span class="sortable_handle">sort</span> 4 </div>
</div>

<div class="sortable_items">
	<div class="sortable_item"> <span class="sortable_handle">sort</span> 1 </div>
	<div class="sortable_item"> <span class="sortable_handle">sort</span> 2 </div>
	<div class="sortable_item"> <span class="sortable_handle">sort</span> 3 </div>
	<div class="sortable_item"> <span class="sortable_handle">sort</span> 4 </div>
</div>
table rows seem to work aswell:
<table border=1>
	<tbody class="sortable_items">
		<tr class="sortable_item"> <td> <span class="sortable_handle">sort</span> </td> <td> 1 </td> </tr>
		<tr class="sortable_item"> <td> <span class="sortable_handle">sort</span> </td> <td> 2 </td> </tr>
		<tr class="sortable_item"> <td> <span class="sortable_handle">sort</span> </td> <td> 3 </td> </tr>
		<tr class="sortable_item"> <td> <span class="sortable_handle">sort</span> </td> <td> 4 </td> </tr>
	</tbody>
</table>

CSS

body{
	line-height:1.15;
}
.sortable_items {
	margin: 5px;
	padding: 2px;
	border: 1px solid #000;
}
.sortable_item {
	margin: 5px;
	padding: 1px;
	border: 1px solid #888;
}
/* while dragging, make sure it has a background so it does not look odd if you drag it over other items.
   dragged items appear to get a class: 'ui-sortable-helper' while being moved.
*/
.sortable_item.ui-sortable-helper {
	background-color:rgba(255,255,255,0.8);
	border-color:#00f;
}
.sortable_handle {
	display:inline-block;
	margin: 2px;
	padding:1px;
	border: 1px outset #888;
	cursor: ns-resize;
}
.sortable_handle::before {
	content: '\21f3';
	content: '\2195';
	margin: 2px;
}

/*
.ui-sortable-placeholder     {min-height:20px;}
.ui-sortable-placeholder > * {min-height:20px;}
.myplaceholder     {min-height:20px;}
.myplaceholder > * {min-height:20px;}
*/

JavaScript

// http://api.jqueryui.com/sortable/
$(document).ready(function() {
// $(event.target) == sortable_item
	if($.fn.sortable) { //check if jquery sortable available on this page
		$( ".sortable_items" ).has('.sortable_item').sortable({
			  items : '.sortable_item'
			, handle: '.sortable_handle'
			, forcePlaceholderSize : true
			, placeholder : 'myplaceholder'
			, axis  : 'y'
			, stop  : function(event,ui){console.log('stop'  , event.target, $(event.target), event, ui);}
			, start : function(event,ui){console.log('start' , event.target, $(event.target), event, ui);}
			, update: function(event,ui){console.log('update', event.target, $(event.target), event, ui);}
		});
	}
	$('.sortable_handle').text(''); // ns arrow added with css ::before{content:'\2195';}
});
// for 'tbody > tr' tablesorting:
// use {forcePlaceholderSize : true, placeholder : 'anyclassstring' } to make room for placeholder row.