jScrollPane with jQuery Sortable from 2 lists

Asked

Viewed 173 times

0

I’m riding a layout where I have two lists (first with 3 maximum items and the second with other items), I can move items between the lists using the sortable jQuery.

The function works perfectly, until I put the jScrollPane, because the responsible design wants a bar of scroll different. Then my problems started.

When trying to switch lists, the item disappears because jScrollPane puts overflow:hidden and so not getting cool the drive.

As jsfiddle.net got bad, I put it on my website http://www.tiedt.com.br/teste/teste.html.

What can I do? Is there any way to make a scroll customized 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();
jquery sortable

  • Marlon, I didn’t understand the problem. Do you want to be able to move elements between the two fields? Right now you can move from top to bottom.

  • That’s right @Sergio. The problem is that when you go from one list to another the element being moved is gone. jscrollpane does something to hide the content and shows only what should be shown.

1 answer

1

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

This new div will have overflow: hidden; and it will be she who hides the overflow of the second fieldset. So this second fieldset won’t have overflow: hiddenin no element except the .jspContainer where you should have overflow-y: scroll. You had added a scroll bar of your own right? With this solution you can take that bar.

With those amendments you gave me this:

inserir a descrição da imagem aqui

Browser other questions tagged jquery sortable

You are not signed in. Login or sign up in order to post.