CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
Sliert
Sliert

Reputation: 19

jquery sortable() with two divs with overflow:auto; object disappears

I want two divs with UL/LI lists where I can drag&drop images from one to another. All works well, but when I have many objects I want one divs to get a scollbar and the other to automaticly grow. I achieve this by setting overflow:auto for both.

But the strange thing is that dragging with the UL itself works fine, but dragging it to the other UL makes the item get 'invisible'

If I remove to overflow:auto it works fine...

This is my js:

jQuery("#drag-kunst-in-lijst ul, #drag-kunst-alles ul" ).sortable( { 
    connectWith: '.sortable',
    delay: 100,
    scroll: false,
    cursor: 'move',
    start: function(event, ui){
        jQuery("#drag-kunst-alles").css("overflow", "hidden");
    },
    stop: function(event, ui){
        jQuery("#drag-kunst-alles").css("overflow", "scroll");
    }
});

I've put a fidle over here: http://jsfiddle.net/edwins/zBTqX/

Upvotes: 0

Views: 1267

Answers (2)

Matt
Matt

Reputation: 335

Your problem appears to be that your setting position relative for both divs and ul's.

You can try absolute or take out position all together.

Here's a fiddle based on yours i took out all positioning accept on the #drag-kunst-in-lijst div i set to absolute.

#drag-kunst-in-lijst {
        position:absolute;
        top:200px;
        width: 365px;
        height: auto;
        border: 1px solid #000;
    }

Upvotes: 0

charlietfl
charlietfl

Reputation: 171689

You need to use the appendTo option. Default is that element is still in parent container while dragging. Using appendTo gives you ability to have it being dragged within a higher level parent. body usually works fine. While in body it will be visible regardless of posiiton relative to original parent

Note. Also set helper to clone. Will have to add some helper css and /or set helper class(s)also

See Sortable Docs

Upvotes: 2

Related Questions