jquery-uijquery-ui-droppabledroppable

jquery ui get exact dropped element


How to get the exact dropped elelement with jquery ui droppable

I have 2 or more elements overlay.

And when I drop an element jquery ui run the "drop" event for each element no juste the element I've drop.


Solution

  • Ok I found this solution

    I add the hovered class and when is dropped I check if my element has this class

        $(".droppable").hover(
            function () {
                $(this).addClass('hovered')
            }, function () {
                $(this).removeClass('hovered')
            },
        );
    
        $('.droppable').droppable({
            refreshPositions: true,
            greedy: true,
            tolerance: "touch",
            drop: function (event, ui) {
                var draggedElement = ui.draggable;
                var droppedElement = $(this);
                if(droppedElement.hasClass('hovered')) {
                    console.log('droppable')
                    // drop my element
                }
    
            },
        });