Multiple select + Multiple Draggable + Multiple Droppable

by cheeray

HTML

<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<div id="container">
<div id="header"></div>
  

<div class="box" id="boxA">
      <h4>box A</h4>
      
      <div class="slot" id="A1"><div class="item" id="a1"></div></div>
      <div class="slot" id="A2"><div class="item" id="a2"></div></div>
      <div class="slot" id="A3"><div class="item" id="a3"></div></div>
      <div class="slot" id="A4"></div>
      <div class="slot" id="A5"></div>
      
      
     
      
    
</div>

<div class ="box" id="boxB">
        <h4>box B</h4>
       
      <div class="slot" id="B1"></div>
      <div class="slot" id="B2"><div class="item" id="b2"></div></div>
      <div class="slot" id="B3"></div>
      <div class="slot" id="B4"></div>
      <div class="slot" id="B5"><div class="item" id="b5"></div></div>
</div>
 
  
</div>

CSS

document {
	background-color: #FFF;
}

.box {
	height: 180px;
	float: left;
	border-top-width: 5px;
	border-right-width: 5px;
	border-bottom-width: 5px;
	border-left-width: 5px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #999;
	border-right-color: #999;
	border-bottom-color: #999;
	border-left-color: #999;
	width: 150px;
	text-align: center;
	margin-left: 20px;
}
.item {
	position: absolute;
	font-size: 12px;
	height: 14px;
	background-color: #CCC;
	width: 110px;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	color: #999;
	margin-left: 6px;
	text-align: center;
}

#header, #footer {
	float: left;
	height: 100px;
	width: 100%;
}
.slot{
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: dotted;
	border-right-style: dotted;
	border-bottom-style: dotted;
	border-left-style: dotted;
	height: 15px;
	width: 120px;
	margin-top: 2px;
	text-align: center;
	vertical-align: middle;
	line-height: 90px;
	margin-right: auto;
	margin-left: auto;
	}
.ui-selecting {
    background: #FECA40;
  }
.ui-selected {
    background-color: #F90;
  }
.green3 {
	background-color: #D9FFE2;
}

JavaScript

$(function() {
var total =[]
// we are going to store the selected objects in here
var selected = $([]), offset = {top:0, left:0};
var eachDrop = {}
$( document ).selectable({    filter: ".item"
                             ,start: function( event, ui ) {
															//remove draggable from selection, otherwise previous selection will still be draggable. 
															$( total ).draggable( "destroy" );
							 
							 },selected: function( event, ui ) {
															    // push selected into total[].
																total.push( ui.selected)
																
							 },unselected: function( event, ui ) { //console.log('unselect ui: ',ui)
							                                      u = ui.unselected
																  //remove unselected from selection[].
																  total = jQuery.grep(total, function(n) {  return n !== u});
							                                      //console.log('total array (unselected): ',total)
							 
							 },stop: function( event, ui ) {     
																//remove duplicated element from total[].
																jQuery.unique( total )
																$(total).each(function(){$(this).draggable(dragOption)})
																//$(total).draggable(dragOption);
																//var widget = $( ".selector" ).draggable( "widget" );
																//console.log('widget: ',widget)
																console.log('break line---------------------------- ')
														   }														   

 });

    //save drag option as an Obj.
	dragOption = {            
					   		  opacity: 0.45
							   ,delay: 300
				   ,connectToSortable: ".slot"
							//,helper: "clone"
							,distance: 5
								,snap: ".slot"
                            ,snapMode: "inner" 
						      ,revert: "invalid"
						       ,start: function(event, ui) {console.log('draggable start ui: ',ui)
							           selected = $(total).each( function() { var el = $(this); el.data("offset", el.offset());
									                                        ...