Multi-select drag'n'drop

Code start here: http://www.stupidannoyingproblems.com/2012/06/using-jquery-ui-draggable-with-selectable-with-ctrlshift-selections/

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<!-- this is not my code. I based it off of the code I found here:
http://www.stupidannoyingproblems.com/2012/06/using-jquery-ui-draggable-with-selectable-with-ctrlshift-selections/
-->

<div id="container" style="position:relative">

<div id="task1" class="task">
	Task 1</a></div>
<div id="task2" class="task">
	Task 2</a></div>
<div id="task3" class="task">
	Task 3</a></div>
<div id="task4" class="task">
	Task 4</a></div>
<div id="task5" class="task">
	Task 5</a></div>

</div>

CSS

#container .ui-droppable{
	padding:5px;
}
#container .ui-draggable{
	padding:5px;
	background-color:#FFF9D8;
}
#container .ui-draggable-dragging, .dragging{
	background-color:#91B168;
	font-color:#202020;
	z-index:1;
	opacity:0.3;
}
#container .ui-selecting { background: #FECA40; }
#container .ui-selected { background: #F39814; color: white;  z-index:1;  }

#container{height: 2000px;}

JavaScript

var selected = $([]); 	// list of selected objects
	var lastselected = '';	// for the shift-click event

	$(function() {
		$("#container").selectable(); // setup the selectables

		// since the draggable will kill the selectable click event, chain in our own
		$("#container .task").click(function(evt){
			// who am i
			id = $(this).attr("id");

			// check keys
			if ((evt.shiftKey) && (lastselected != '')) {
				// loop all tasks, select area from this to lastselected or vice versa
				bSelect = false;
				$(".task").each(function() {
					if ($(this).is(':visible')) {
						if ($(this).attr("id") == id || $(this).attr("id") == lastselected)
							bSelect = !bSelect;	

						if (bSelect || $(this).attr("id") == lastselected || $(this).attr("id") == lastselected) {
							if (!$(this).hasClass("ui-selected"))
		   						$(this).addClass("ui-selected");
						}
		   				else
		   					$(this).removeClass("ui-selected");
					}
				});
				return;
			}
			else if (!evt.ctrlKey)
				$(".ui-selected").removeClass("ui-selected"); // clear other selections

			if (!$(this).hasClass("ui-selected")) {
		   		$(this).addClass("ui-selected");
		   		lastselected = id;
			}
			else {
				$(this).removeClass("ui-selected");
				lastselected = '';
			}
		});

		$("#container .task").draggable({
			axis: "y",
			revert: "invalid",
			containment: '#container',
			start: function(ev, ui) {
				$(this).is(".ui-selected") || $(".ui-selected").removeClass("ui-selected");
				selected = $(".ui-selected").each(function() {
					$(this).addClass("dragging");
				});
			},
			drag: function(ev, ui) {
				var dt = ui.position.top, dl = ui.position.left;
				selected.not(this).each(function() {
					// move the objects by the event size
					var el = $(this);
					el.css({top: dt, left: dl});
					// note this only works because we are relatively positioned
					// if you used absolute positioning you would need to add in the offsets of the elements
				});
			},
			stop: function(ev,...