jScrollPane with jQuery Sortable from 2 lists

0
I'm building a layout where I have two lists (first with 3 maximum items and the second with other items), which I can move items between lists using jQuery% p>

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();
    
asked by anonymous 28.05.2014 / 12:47

1 answer

1

I made tests on your page and the only solution I see (and tested) is to add div extra with both <fieldset class="linhaIndicador"> inside it.

This new div will have overflow: hidden; and it will hide the overflow of the second fieldset . So this second fieldset will not have overflow: hidden in any element except the .jspContainer where it should have overflow-y: scroll . You had added a proper scroll bar right? With this solution you can remove this bar.

With these changes gave me this:

    
30.05.2014 / 08:09