jquery - Jquery 可拖动回显放置的 div 类 id

Question

我正在尝试回显放置可拖动多维数据集的 div id。

有关如何跟踪 div 放置位置的任何线索？我从 jquery 中读取了位置，但没有弄清楚。

这是我的代码：

$('.drop').droppable({
    tolerance: 'intersect',
    drop: function(event, ui) {
        var drop_p = $(this).offset();
        var drag_p = ui.draggable.offset();
        var left_end = drop_p.left - drag_p.left + 1;
        var top_end = drop_p.top - drag_p.top + 1;

        ui.draggable.animate({
            top: '+=' + top_end,
            left: '+=' + left_end
        });
    }
});

$('.boxArt').draggable({
    revert: 'invalid',
    scroll: false,
    stack: ".boxArt"
});

Answer 1

尝试

$('.drop').droppable({
    tolerance: 'intersect',
    drop: function(event, ui) {
        console.log(this.id)// this.id will give the `.drop` id to which the element was dropped
        var drop_p = $(this).offset();
        var drag_p = ui.draggable.offset();
        var left_end = drop_p.left - drag_p.left + 1;
        var top_end = drop_p.top - drag_p.top + 1;

        ui.draggable.animate({
            top: '+=' + top_end,
            left: '+=' + left_end
        });
    }

});

演示：小提琴