全部放下后的拖放功能

Question

我正在使用查询 ui 进行拖放，我的所有元素都具有相同的类“.draggable”和“dropzone”。我想在每个具有类 .draggable 的元素都被删除时触发一个函数。有人可以告诉我一个简单的方法吗？

HTML

<div id="left-panel">
    <div id="drag-1" class="draggable">dra 1</div>
    <div id="drag-2" class="draggable">dra 2</div>
    <div id="drag-3" class="draggable">dra 3</div>
</div>
<div id="right-panel">
    <div id="drop-1" class="dropzone sekt dropzone ui-droppable"></div>
    <div id="drop-2" class="dropzone sekt dropzone ui-droppable"></div>
    <div id="drop-3" class="dropzone sekt dropzone ui-droppable"></div>
</div>

jQuery

//DRAG CONDITIONS

$("#drag-1").draggable({
    containment: '.zone-container',
    snap: '#drag-1',
    revert: 'invalid'
});
$("#drag-2").draggable({
    containment: '.zone-container',
    snap: '#drag-2',
    revert: 'invalid'
});
$("#drag-3").draggable({
    containment: '.zone-container',
    snap: '#drag-3',
    revert: 'invalid'
});

//DROP & ACTION 
$("#drop-1").droppable({
    accept: "#drag-1",
    drop: function (event, ui) {
        $('.popup').show();
    }
});
$("#drop-2").droppable({
    accept: "#drag-2",
    drop: function (event, ui) {
        $('.popup').show();
    }
});
$("#drop-3").droppable({
    accept: "#drag-3",
    drop: function (event, ui) {
        $('.popup').show();
    }
});

小提琴-http://jsfiddle.net/j9Ump/63/

Answer 1

您可以检查可放置 div 数量的长度，并在每次放置时递减计数器。当计数器达到零时验证。这意味着所有的都被丢弃了。更新小提琴 - http://jsfiddle.net/j9Ump/67/

//DRAG CONDITIONS
counterForDropped = $("#left-panel").find('.draggable').length;
$("#drag-1").draggable({
    containment: '.zone-container',
    snap: '#drag-1',
    revert: 'invalid'
});
$("#drag-2").draggable({
    containment: '.zone-container',
    snap: '#drag-2',
    revert: 'invalid'
});
$("#drag-3").draggable({
    containment: '.zone-container',
    snap: '#drag-3',
    revert: 'invalid'
});

//DROP & ACTION 
$("#drop-1").droppable({
    accept: "#drag-1",
    drop: function (event, ui) {
        counterForDropped--;
        checkLastDrop();
    }
});
$("#drop-2").droppable({
    accept: "#drag-2",
    drop: function (event, ui) {
        counterForDropped--;
        checkLastDrop();
    }
});
$("#drop-3").droppable({
    accept: "#drag-3",
    drop: function (event, ui) {
        counterForDropped--;
        checkLastDrop();
    }
});

function checkLastDrop() {

    if (counterForDropped === 0) {
        alert('last dropped');
    }

}