Nested Div Sortable Example

by skibulk

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div id="builder">
    <div class="drop">
        <div class="above"></div>        
        <div class="below"></div>        
    </div>
</div>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
#builder .drop {
    min-height: 20px;
}
#builder .drag {
    border: 1px solid gray;
    background: white;
    padding: 20px;
}
#builder div + div {
    margin-top: 20px;
}
#builder .helper {
    height: 0 !important;
}
#builder .helper .drop, #builder .helper .hint {
    display: none;
}
#builder .placeholder {
    background: lightblue;
}

JavaScript

$(function() {
    for (var i=0; i<5; i++) {
    	$('#builder .above').last().after(
`
			<div class="drag">
                <div class="drop">
                    <div class="above">
                        <p>Col ${i+1}</p>
                    </div>
                    <div class="below">
                        <p>Col ${i+1}</p>
                    </div>
				</div>
            </div>
`
        );
    }
    
    $('#builder').disableSelection();
    $('#builder .drop').sortable({
        connectWith: '#builder .drop',
        items: '.drag',
		cursorAt: { top: 0, left: 0 },
        placeholder: 'drag placeholder',
        start: function (event, ui) {
            ui.helper.addClass('helper');
        },
        change: function (event, ui) {
            var place = ui.placeholder;
            if (place.is(':first-child')) {
				place.insertAfter(place.next());
        	}
            if (place.is(':last-child')) {
				place.insertBefore(place.prev());
        	}
        },
        stop: function (event, ui) {
            ui.item.removeClass('helper');
        },
    });
});