2

我有一组 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"?
}
4

2 回答 2

1

我会说你应该把它们存储在一个数组中。

.push()当它们“消失”时将它们放入数组中，这可能应该只是为display:none它们分配一个 css 类。然后，当您将卡片翻过来时，取出数组中的最后一项（最近推送的项）并移除该类。

这一切都只是从您有限的描述中猜测出来的，但是沿着这些思路的东西应该可以工作。

于 2013-09-30T21:13:25.673 回答
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();
            }
        });
    };
});

演示在这里

于 2013-09-30T21:44:55.430 回答