multiple droppable

Question

I\'ve have multiple droppable divs (which all have the same size) and one draggable div. The draggable div is 3 times bigger than one droppable. When I drag the draggable di

Answer 1

Maybe like this? Put up a demo here.

$(".droppable").droppable({
    drop: function (event, ui) {
        var $draggable = $(ui.draggable);

        var draggableTop    = $draggable.offset().top;
        var draggableHeight = $draggable.height();
        var draggableBottom = draggableTop + draggableHeight;

        $droppables = $(".droppable");

        $droppablesCoveredByDraggable = $droppables.filter( function() {
            var $droppable  = $(this);
            var top                 = $droppable.offset().top;
            var height          = $droppable.height();
            var bottom          = top + height;

            var isCoveredByDraggable = top <= draggableBottom && bottom >= draggableTop;
            return isCoveredByDraggable;
        });

        //example: mark the droppables that are covered
        $droppables.removeClass("marked");
        $droppablesCoveredByDraggable.addClass("marked");
    }
});