jQuery draggable overlaps with multiple droppable, wrong drop

Question

I have created this fiddle

http://jsfiddle.net/v3L7A/14/

$(function () {

$('#draggable').draggable({
    helper: 'clone'
});

$('#droppable1, #droppable2').droppable({
    drop: function (event, ui) {
        $(this)
            .append(ui.helper.clone(false).css({
            position: 'relative',
            left: '0px',
            top: '0px'
        }));
    }
});

});

When I drag the text, i want the drop "anchor" to be its top left corner, however, it always goes to the middle cell.

How can i do it so that no matter the width of the dragged element, if it spans multiple droppables, it goes to the one where either the mouse is over, or the first one?

Answer 1

You can use the tolerance parameter to modify the overlap behavior. To drop it at the mouse pointer, set it to "pointer".

See the Droppable API for more options, e.g. "fit" (Draggable overlaps droppable 100%), "intersect" (50%), or "touch" (any%)

Fiddle: http://jsfiddle.net/v3L7A/15/

$(function () {
    $('#draggable').draggable({
        helper: 'clone'
    });

    $('#droppable1, #droppable2').droppable({
        tolerance: "pointer",
        drop: function (event, ui) {
            $(this)
                .append(ui.helper.clone(false).css({
                position: 'relative',
                left: '0px',
                top: '0px'
            }));
        }
    });
});