jQuery UI Sortable - Drop placeholder
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
html>body #sortable li { height: 1.5em; line-height: 1.2em; }
.ui-state-highlight { height: 1.5em; line-height: 1.2em; }
$(function() {
$("#sortable").sortable({
placeholder: 'ui-state-highlight'
});
$("#sortable").disableSelection();
});
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
When dragging a sortable item to a new location, other items will make room
for the that item by shifting to allow white space between them. Pass a
class into the placeholder option to style that space to
be visible. Use the boolean forcePlaceholderSize option
to set dimensions on the placeholder.