Question

Im building a popup image gallery where a user can drag an image from the popup div and drop it elsewhere on the page.

The popup gallery is an overlay div (using css) so there are no iframes or anything as such.

I’ve successfully implemented the drag and drop using JQUERY UI, however what I want is –

Whenever a user drags an image out of the gallery popup div, the
popup div should hide/fadeout and the image can be dropped elsewhere.
But the problem is, as soon as I hide the gallery popup div
(originating container), my helper clone also disappears. (however the
drop can still be made, but I lose the visual feedback)

I’ve tried moving the position of the gallery div to -999,-999 (without hiding it) but even that hides my visual feedback clone (the helper)

Someone please help me find a solution to this.

Thanks

Answer 1

You should be able to do this using draggable’s appendTo option. By default, the helper is appended to the same container as the draggable, which is why it disappears when you hide it.

Perhaps something like this would work:

$( '.thumb' ).draggable( {
    helper: 'clone',
    appendTo: 'body',
    start: function() {
        $('#container').hide();
    }
} );

Hope that helps.