Important Note: The code below utilizes the rubuxa plugin for handling JS sortables.
Javascript:
function querySelector(expr){return document.querySelector(expr)}
var container = querySelector('.ITEST');
var sortable = Sortable.create(container, {
animation: 350,
draggable: ".draggable",
});
CSS:
.draggable{
color: #fff;
margin: 1px;
float: left;
display: inline-block;
}
.ITEST{
width:425px;
height:400px;
margin:auto;
border:1px solid grey
}
http://jsfiddle.net/g8o0upLq/9/
An issue arises when dragging the red squares as they do not stack vertically on top of each other but rather horizontally. This results in unwanted additional white space beneath them. Attempts to set the same height for all divs have been unsuccessful.