Question

I have a draggable which on the stop event, I want move to a certain boundary IF it wasnt dragged onto anything else. Problem: the drop event handled by droppable occurs AFTER the stop event from the draggable handler. The stop handler for draggables gives the location that the draggable was dragged to, but I dont know how to determine what element is at that location. Any ideas?

Answer 1

You could probably just loop through the droppable elements and check their offset position. Combined with the width/height of each element, you can calculate which element the draggable was over when the stop event is fired. Something like this (this is untested, off the top of my head.)

function stopCallback (x, y) {
    var $droppables = $(".droppable"),
        containedDraggableAtStop = function($item, left, top) {
            var itemL = $item.offset().left,
                itemT = $item.offset().top,
                itemR = itemL + $item.width,
                itemB = itemT + $item.height;

            if (top > itemT && top < itemB && left > itemL && left < itemR) {
                return true;
            }
            return false;
        },
        numDroppables = $droppables.length,
        i;

    // x, y are the coords passed from the stop function
    for (i = 0; i < numDroppables; i++) {
        if (containedDraggableAtStop($droppables.eq(i), x, y)) {
            return $droppables.eq(i);
        }
    }
    return -1;
}