jQuery draggable 与 multiple droppable 重叠，错误放置

Question

我创建了这个 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'
        }));
    }
});

});

当我拖动文本时，我希望下拉 "anchor" 成为它的左上角，但是，它总是 到中间的单元格。

我怎样才能做到无论拖动元素的宽度如何，如果它跨越多个 droppables，它会转到鼠标悬停的那个，或者第一个？

Answer 1

您可以使用 tolerance 参数修改重叠行为。要将其放在鼠标指针处，请将其设置为 "pointer"。

有关更多选项，请参阅 Droppable API，例如"fit"（可拖动重叠可放置 100%）、"intersect"（50%）或 "touch"（任意 %）

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'
            }));
        }
    });
});