Sortable Using Draggable - MULTI CONTAINERS - BIZAMAJIG USAGE

by bizamajig

HTML

<div id="wrapper">
	<div id="drop-1" class="stage">
		<img src="http://placehold.it/140x100" id="one" title="one" class="draggable" />
		<img src="http://placehold.it/150x100" id="two" title="two" class="draggable" />
		<img src="http://placehold.it/160x100" id="three" title="three" class="draggable" />
	</div>
	<div id="drop-2" class="stage"></div>
</div>

CSS

#drop-1, #drop-2 {
  background-color: lightgreen;
}
#drop-1 img, #drop-2 img {
  margin-top: 3px;
  margin-left: 5px;
}
#drop-1, #drop-2 {
  background-color: red;
  min-height: 120px;
}
.over {
  border: solid 5px purple;
}
.draggable {
  border: solid 2px gray;
}

JavaScript

$(".draggable").draggable({ cursor: "crosshair", revert: "invalid"});
$(".stage").droppable({
  accept: ".draggable", 
  drop: function(event, ui) {
    console.log("drop");
    $(this).removeClass("border").removeClass("over");
    var dropped = ui.draggable;
    var droppedOn = $(this);
    $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);      
  }, 
  over: function(event, elem) {
    $(this).addClass("over");
    console.log("over");
  },
  out: function(event, elem) {
    $(this).removeClass("over");
  }
});
$(".stage").sortable();