CODEWITHSUNDEEP
jquerycssjquery-ui
AaronS
AaronS

Reputation: 7703

Adding overflow to a div prevents its contents from dragging properly

I'm using the jquery FullCalendar plugin, and I'm adding external events to a calendar.

Everything works perfectly from this example. However, I have a lot of external events that need to be dragged onto the calendar, so my list of events needs to scroll.

I added:

overflow-y: auto;

to the parent div, which does allow it to scroll. However, the events disappear when they are dragged outside the parent div.

Here is a JSfiddle of what happens

I've tried as many combinations of z-index and overflow combinations as I can, and they keep disappearing when they leave the parent.

How can I allow the parent div to scroll and prevent the event items from disappearing when dragged?

Upvotes: 2

Views: 312

Answers (1)

Aaron Blenkush
Aaron Blenkush

Reputation: 3059

If this is the initialization of your Draggable:

$(this).draggable({
    zIndex: 999,
    revert: true, // will cause the event to go back to its
    revertDuration: 0, //  original position after the drag
    scroll: false,
    //INSERT HERE
});

Then insert one of the following options at the //INSERT HERE line:

Option 1

    helper: 'clone',
    appendTo: 'body'

This will work as desired, but the dragged element will be cloned upon dragging.

To avoid that, use the next option:

Option 2

    helper: function(event, ui) {
        var clone = $(this).clone();
        $(this).css({opacity:0}); //or $(this).hide()
        return clone;
    },
    stop: function(event, ui) {
        $(this).css({opacity:1}); //or $(this).show()
    },
    appendTo: 'body'

See this Fiddle for an example.

If you need to actually "move" the element (i.e. it doesn't reappear after dropping it), you'll need to remove() the element once it's been dropped in the proper place. You could add something to the receive callback of the Droppable that removes the original element.

Upvotes: 4

Related Questions