Draggable Sortable Multiple Selected
HTML
<div class="container">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
</div>
CSS
body {
background-color:#012;
font-family:sans-serif;
text-align:center;
}
div {
margin:5px 0;
padding:1em;
}
.container {
width:52%;
margin:1in auto;
background-color:#555;
border-radius:.5em;
box-shadow:0 0 20px black;
}
.container div {
background-color:#333;
color:#aaa;
border:1px solid #777;
background-color:#333;
color:#aaa;
border-radius:.25em;
cursor:default;
height:1em;
}
.container div:hover {
background-color:#383838;
color:#ccc;
}
.selected {
background-color:#36a !important;
border-color:#036 !important;
color:#fff !important;
font-weight:bolder;
}
JavaScript
$(function () {
$('.container').on('click', 'div', function () {
$(this).toggleClass('selected');
});
$(".container").sortable({
revert: true,
helper: function (e, item) {
if (!item.hasClass('selected')) item.addClass('selected');
var elements = $('.selected').not('.ui-sortable-placeholder').clone();
var helper = $('<div/>');
item.siblings('.selected').addClass('hidden');
return helper.append(elements);
},
start: function (e, ui) {
var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
ui.item.data('items', elements);
var len = ui.helper.children().length;
console.log(ui.item.height());
var currentHeight = ui.helper.height()
var itemHeight = ui.item.height() + 32; // 32 = 16x2 padding
ui.helper.height(currentHeight + (len * itemHeight))
ui.placeholder.height((len * itemHeight))
},
receive: function (e, ui) {
ui.item.before(ui.item.data('items'));
},
stop: function (e, ui) {
ui.item.siblings('.selected').removeClass('hidden');
$('.selected').removeClass('selected');
}
});
});