CODEWITHSUNDEEP
jqueryjquery-uidrag-and-dropdroppable
ben
ben

Reputation: 1525

jQuery droppable item overlap

I have 1 draggable div and 2 droppable divs. Those 2 droppable divs also are draggable so there might be a chance those 2 divs are overlapped. In that situation, when I drag the draggable div and drop to the overlapped divs, is there anyway to make sure it is dropped on the top one?

Upvotes: 2

Views: 3163

Answers (1)

Yoni Baciu
Yoni Baciu

Reputation: 2707

I had a slightly different problem: I had two types of droppables, one type always on top of the other.

To know on which droppable the draggable was dropped, the higher droppable added a class to the draggable when it was dragged over it. When the drop event fired on both droppables, the lower droppable checked to see if the draggable had the added class. If yes then it ignored the drop event.

top.droppable({
    over: function( drop_event, drop_ui ) {
      drop_ui.helper.addClass('over_top_element');
    },
    out: function( drop_event, drop_ui ) {
      drop_ui.helper.removeClass('over_top_element');
    },
    drop: function(drop_event, drop_ui) {
      //Handle drop here
    }
});

bottom.droppable({
    drop: function(drop_event, drop_ui) {
        if (!ui.helper.hasClass('over_top_element'))
        {
            //Handle drop here
        }
    }
});

Upvotes: 2

Related Questions