CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-draggablejquery-ui-droppable
Mike Flynn
Mike Flynn

Reputation: 24315

jQuery UI draggable being dropped in droppable behind container

I have an excel grid of droppables and a orphan container of draggables. The orphan container takes up 1/3 of the screen and is on top of the droppable excel grid in a fixed position so you can move around the droppable grid. I drag these items from the orphan container to a droppable bucket behind it. If I barely drag an item in the orphan container it sometimes goes behind it to the droppable containers and gets inserted. Is there a way not to do that, and just stay in the orphan container if it wasnt moved outside of it.

The image below shows the orphan container called unscheduled games. If I barely drag the B1 vs B2, it gets dropped in a smaller container behind it instead of staying in the orphan container. So it looks like it just disappears.

enter image description here

Update:

I noticed that both my droppables "drop" event are being hit. The orphan container gets hit, and then the second one gets hit, and the second one accepts it.

Upvotes: 0

Views: 925

Answers (2)

Mike Flynn
Mike Flynn

Reputation: 24315

I fixed this by adding a class to the draggable item and removing it in the over/out events of the orphan container.

            over: function( event, ui ) {
                $(ui.draggable).addClass('orphan-droppable');
            },
            out: function (event, ui) {
                $(ui.draggable).removeClass('orphan-droppable');
            }

and testing if the element has it in the grid droppable, if the class was found on the element I ignore it.

 drop: function (event, ui) {

                        if (!$(ui.draggable).hasClass('orphan-droppable')) {
// Work on element
}

Upvotes: 1

Hugo Silva
Hugo Silva

Reputation: 6938

Try disabling the grid of droppables and listen to the "out" and "over" events on the orphan container. When out is triggered you enable the grid, and on over you disable again.

Upvotes: 0

Related Questions