The function works perfectly, until I put jScrollPane, because the person in charge of design wants a different scroll bar. Oh my troubles have begun.
When you try to change lists, the item disappears because jScrollPane places sortable
and so it is not legal to move.
As jsfiddle.net has gone bad, I put it on my site link .
What can I do? Is there any way to make a custom scroll for all browsers?
$('.scroll-pane').jScrollPane({ autoReinitialise: true });
Sortable
$('#sort1').sortable({
receive: function (event, ui) {
var li = $('#sort1 li:last');
if ($("#sort1 li").length > 3) {
$("#sort2").append("<li class='panel panel-default' id='set_" + li.attr("id") + "' class='ui-state-default'>" + $("#" + li.attr("id")).text() + "</li>");
$('#sort1 li:last').remove();
}
},
connectWith: ".sortable",
appendTo: 'body'
}).disableSelection();
$('#sort2').sortable({
connectWith: ".sortable",
appendTo: 'body'
}).disableSelection();