jQuery UI Selectable, draggable, droppable

jQuery UI Selectable, draggable, droppable

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="selectable">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
</div>
<br />
<div id="droppable"></div>
<div class="tooltip"></div>

CSS

.ui-selecting {
    background: #FECA40;
}

.ui-selected {
    background: #F39814;
    color: white;
}

#selectable {
    margin: 0;
    padding: 0;
    height: 300px;
    position: relative;
    padding:0;
    border:solid 1px #DDD;
}

#selectable > div, #droppable > div{
    padding:10px;
    border:solid 1px #CCC;
    width: 100px;
}

.ui-selectable-helper{
    position: absolute;
    z-index: 100;
    border:1px dotted black;
}

#droppable{
    height:300px;
    border:1px dashed #ccc;
}

.tooltip{
    display:none;
    position:fixed;
    top:10px;
    left:10px;
    background:white;
    border:1px solid #ccc;
    padding:5px;
}

/* Temporary fix to stop items following mouse */
.ui-selectee{
    position:relative !important;
    top: 0 !important;
    left:0 !important;
}

JavaScript

$(document).ready(function(){
	Init(); // script init
    
	$("body").on("click", "#droppable > div", function(){
		$("#selectable").append("<div>" + $(this).html() + "</div>");
		$(this).remove();
		Init(); // Reinits for dynamically created items
	});
	
    // Moves the "item count" tooltip
	var mouseX,
        mouseY;
	$(document).mousemove( function(e) {
	   mouseX = e.pageX; 
	   mouseY = e.pageY;
	   $('.tooltip').css({'top':mouseY,'left':mouseX});
	});
    
    // Hides the "item count" tooltip upon mouse up event
	$(document).mouseup( function() {
	   $('.tooltip').hide();
	});
});

function Init(){
	var selected = $([]), offset = {top:0, left:0};
    
    // Makes the first set of items draggable
	$( "#selectable > div" ).draggable({
	    start: function(ev, ui) {
	        if (!$(this).hasClass("ui-selected")){
	            selected = $([]);
	            $("#selectable > div").removeClass("ui-selected");
	        }
	    },
	    drag: function(ev, ui) {
	    	$(".tooltip").show().text($(".ui-selected, .ui-draggable-dragging").length);
	    }
	});
	
    // Makes the first set of items selectable
	$( "#selectable" ).selectable();
	
    // Function to make items draggable on click, rather than drag-selected. This is the part which doesn't really work with dynamic items
	$("body").on("click", "#selectable > div", function(e){
	    if (e.metaKey == false) {
	        $( "#selectable > div" ).removeClass("ui-selected");
	        $(this).addClass("ui-selecting");
	    }
	    else {
	        if ($(this).hasClass("ui-selected")) {
	            $(this).removeClass("ui-selected");
	        }
	        else {
	            $(this).addClass("ui-selecting");
	        }
	    }
	    $( "#selectable" ).data("ui-selectable")._mouseStop(null);
	});
	
    // Enables the droppable area
	$( "#droppable" ).droppable({
        accept: ".ui-selected, .ui-draggable-dragging",
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        drop: function( event,...