jquery - 获得新的首创

Question

我有一组 div，其中第一个是拖放目标(通过 ui-droppable)。我正在将其他 div 拖到它们上面，就像玩纸牌一样。当我这样做时，我想让卡片和它的目标都消失(我目前正在使用 .remove())，然后向上滑动其他潜在目标并成为最上面的目标一个有效的目标。

由于我的 CSS，目标 div 中的第一个(既是“第一个”又是“ui-droppable”的)看起来与其他 div 不同。当我删除第一个目标时，第二个目标向上移动但不会自动成为新的“第一个” - 它没有从我的 css 获得视觉外观，现在也没有成为有效的拖放目标。

关于我如何在删除一个元素后“重置”哪个元素被认为是第一个元素有什么建议吗？

这是我当前的代码；不是很复杂。

$(document).ready(function(){
    $('.card').draggable({ revert: true });
    $('.event:first-of-type').droppable({ drop: Drop });
});

function Drop(event, ui) {
    $(this).remove();
    // and then maybe something here to update and get a new "first"?
}

Answer 1

我的建议:

$(document).ready(function () {
    var dragged, first;
    $('.card').draggable({
        start: function (event, ui) {
            dragged = this;
            first = $('div.card:first');
            Drop();
        },
        revert: true
    });

    // When we drop a card on the "today" event, call the Drop function.
    function Drop() {
        first.droppable({
            drop: function (event, ui) {
                console.log(this);
                $(this).remove();
                $(dragged).remove();
            }
        });
    };
});

演示 here