jQuery UI Selectable - Default functionality

jQuery UI Selectable - Default functionality

by Ankit Patidar

HTML

<ol id="selectable">
  <li class="ui-widget-content">Item 1</li>
  <li class="ui-widget-content">Item 2</li>
  <li class="ui-widget-content">Item 3</li>
  <li class="ui-widget-content">Item 4</li>
  <li class="ui-widget-content">Item 5</li>
  <li class="ui-widget-content">Item 6</li>
  <li class="ui-widget-content">Item 7</li>
</ol>

CSS

#feedback { font-size: 1.4em; }
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39814; color: white; }
  #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }

JavaScript

$(function() {
  $( "#selectable" ).selectable();
});
$(function() {


		
		$('#selectable li').draggable({
			distance: 1,
			helper: function(event) {
				
				var set = $('<div></div>'),
					selected = $("#selectable li.ui-state-active"),
					offset = $(this).offset(),
					click = {
						left: event.pageX - offset.left,
						top: event.pageY - offset.top },
					center = {
						left: (selected.length < 5 ? selected.length / 2 : 2.5) * 20,
						top: ((parseInt((selected.length-1) / 5) + 1) * 20) / 2
					};
				
				selected.each(function(i) {
					
					var row = parseInt(i / 5);
					var j = i - (row * 5);
					
					var copy = $('<div></div>')
						.addClass('ui-state-active')
						.html(this.innerHTML.split(' ')[1])
						.css({
							width: $(this).width(), height: $(this).height(),
							padding: 3, margin: 2, position: 'relative', overflow: 'hidden'
						})
						.appendTo(set)
						.animate({
							width: 10,
							height: 10,
							left: (20 * j) + click.left - center.left,
							top: (-20 * i) + click.top - center.top + (row * 20)
						}, 500);
					
				});
				
				
				return set;
				
			}
		});
		
		//YES! A STANDARD NON-OPTIONS SELECTABLE!
		$("#selectable").selectable();
		
	});