拖放功能

Question

我使用query作为拖放，我的所有元素都有相同的类'.draggable‘和’下拉区域‘。当删除了类.draggable的每个元素时，我想触发一个函数。有人能告诉我一种简单的方法吗？

<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');
    }

}