Question

我有一组div，第一个是拖放目标（通过ui-droppable）。我正在拖动其他div，就像打牌一样。当我这样做时（我正在使用.remove()进行），我想让卡片及其目标都消失，然后将其他潜在目标向上滑动，使顶部目标成为有效目标。

由于我的css，第一个目标div（同时是“first-of-type”和“ui-droppable”）看起来与其他div不同。当我移除第一个目标时，第二个目标向上移动但不会自动成为新的“第一个” - 它不会从我的CSS获得视觉外观，也不会成为有效的拖放目标。 / p>

关于我如何排除“重置”哪个元素在我删除之后被认为是第一个的任何建议？

这是我目前的代码;不是很复杂。

$(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

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

.push()将它们“消失”到数组中，这应该只是为它们分配一个display:none css类。然后，当您翻转卡片时，取出阵列中的最后一项（最近推送的项目）并删除该课程。

这只是猜测你有限的描述，但沿着这些方向的东西应该有用。

Answer 2

我的建议：

$(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();
            }
        });
    };
});

获得新的第一类型

2 个答案:

演示here