Jquery draggable inside of niceScroll plugin overflow issue

Question

Hi I have a list of items that are draggable that need dropped onto a different div.

I am using the jquery plugin niceScroll and I can't drag objects 'outside' of the niceScroll and I think has something to do with overflow being hiddent but cannot make it work.

The drop event fires when I let go of the mouse over the droppable div.

I have

//COMMENT ME OUT TO SEE THAT IT WORKS WHEN niceScroll IS NOT ENABLED
$("#external-sales-orders").niceScroll();

$(".external-event").draggable({
    revert: true

});

$("#droppable").droppable({
    drop: function(){
        alert("Dropped");
    }
});

check out this : http://jsfiddle.net/BYK4J/2/

Thanks!

Answer 1

Try making a clone and appending it to the body:

$(".external-event").draggable({
    revert: true,
    appendTo: 'body',
    helper: 'clone'
});

FIDDLE

Check out the appendTo() documentation: JQuery UI API.

AppendTo designates which element the draggable helper should be appended to while dragging. By default this is set to the elements parent.

UPDATE:

Figured out a way to achieve the functionality you wanted in congruence with the nice scroll plugin. When the element is dragged it sets the original element to visibility:hidden so the spot is still preserved and then when the item is dropped it reverts the visibility. Here's the updated fiddle.