jQuery UI - Droppable只接受一個可拖動的

Question

我在製作一個應用程序，即使用一個可插入的div和幾個可拖動的div s。我該如何讓Droppoble不能接受多個可拖動的div？我谷歌搜索，但沒有找到任何解決方法。

---

一個解決方法出現在腦海裏。我該如何檢查是否存在這個droppable div中的元素？如果是忙然後恢復這個拖動，這是試圖將被丟棄

Answer 1

您可以第一drop後導致.droppable()小部件，像這樣：

$(".droppable").droppable({ 
    drop: function(event, ui) { 
     $(this).droppable("destroy"); 
    } 
}); 

You can try out a demo here。

Answer 2

要啓用它，使用選項：$(".selector").droppable({ disabled: **false** });

Answer 3

OK找到了這個很好的解決方案，從根本上「滴」我設置可放開只接受已被拖進它的項目。

當你'禁用'時，你需要重新初始化的'out'事件不再可用，所以我只是切換了符合條件的項目。

然後它可能對我來說，使用OUT時重新接受所有可拖動項目，並因爲沒有其他接受OUT不會被其他拖拽元素被觸發：

$(".drop-zone").droppable({ 
    drop: function(event, ui) { 
     $(this).droppable('option', 'accept', ui.draggable); 
    }, 
    out: function(event, ui){ 
     $(this).droppable('option', 'accept', '.drag-item'); 
     } 
    }); 
}); 

Answer 4

如何：

$(".drop-zone").droppable({ 
    accept: function(draggable) { 
     return $(this).find("*").length == 0; 
    }); 
}); 

這樣，只有當沒有元素被丟棄時，accept funcion才返回true。

Answer 5

你也可以用相反的方法做到這一點，當可拖拽具有特定的類或屬性時（通過構建該示例：https://stackoverflow.com/a/3418306/1005334），還原可拖拽。

因此，例如，使用rel屬性（你也可以使用class或別的東西），用於可投放：

$('.drop-zone').droppable({ 
    drop: function() { 
     drop.attr('rel', 'filled'); 
    } 
}); 

而且可拖動：

$('.draggable').draggable({ 
    revert: function (droppable) { 

     if (droppable.attr('rel') == 'filled') { 
      return true; 
     } 
    } 
}); 

Answer 6

易Peasey。剛剛啓用所有.drop區，當鼠標懸停它們，然後檢查目前徘徊.drop區包含一個可拖動的元素

$('.drop-zone').droppable({ 
    over: function(event, ui) { 

    // Enable all the .droppable elements 
    $('.droppable').droppable('enable'); 

    // If the droppable element we're hovered over already contains a .draggable element, 
    // don't allow another one to be dropped on it 
    if($(this).has('.draggable').length) { 
     $(this).droppable('disable'); 
    } 
    } 
}); 

Answer 7

該解決方案解決了一個重大的錯誤在Likwid_T的答案的。

$('.draggable').draggable({ 
    start: function(ev, ui) { 
    $('.ui-droppable').each(function(i, el) { 
     if (!$(el).find('.ui-draggable').length) $(el).droppable('enable'); 
    }); 
    } 
}); 

$('.droppable').droppable({ 
    drop: function(ev, ui) { 
    $(ev['target']).droppable('disable'); 
    } 
}); 

Answer 8

我的解決方案類似於Likwid_T的，除非它使用可放開drop事件以及維護拖拽元素和droppables，而不是可棄的out事件之間的聯繫。我認爲使用out的問題在於，即使拖動了已經「完整」的可拖拽然後「拖曳」它時，它也會被觸發。

droppable({ 
    drop: function(event, ui) { 
    var $droppable = $(this); 
    var $draggable = ui.draggable; 

    // If the draggable is moved from another droppable, unlink it from the old droppable 
    var oldDropped = $draggable.data('dropped'); 
    if(oldDropped) { 
     $draggable.data('dropped', null); 
     oldDropped.data('dragged', null); 
    } 

    // Link the draggable and droppable 
    $draggable.data('dropped', $droppable); 
    $droppable.data('dragged', $draggable); 
    }, 
    accept: function() { 
    // Only accept if there is no draggable already associated 
    return !$(this).data('dragged'); 
    } 
}); 

一個相關的特徵是，一個拖一個項目上已經有一個可拖動可投放，老人們會被替換，並恢復到初始位置。這就是我要做的事：

droppable({ 
    drop: function(event, ui) { 
    var $droppable = $(this); 
    var $draggable = ui.draggable; 

    // Reset position of any old draggable here 
    var oldDragged = $droppable.data('dragged'); 
    if(oldDragged) { 
     // In the CSS I have transitions on top and left for .ui-draggable, so that it moves smoothly 
     oldDragged.css({top: 0, left: 0}); 
     oldDragged.data('dropped', null); 
    } 

    // If the draggable is moved from another droppable, unlink it from the old droppable 
    var oldDropped = $draggable.data('dropped'); 
    if(oldDropped) { 
     $draggable.data('dropped', null); 
     oldDropped.data('dragged', null); 
    } 

    // Link the draggable and droppable 
    $draggable.data('dropped', $droppable); 
    $droppable.data('dragged', $draggable); 
    }, 
}); 

Answer 9

我花很多時間來弄明白，最後工作對我來說是這樣的：

$(".drop-zone").droppable({ 
    classes: { 
     "ui-droppable-active": "ui-state-active", 
     "ui-droppable-hover": "ui-state-hover" 
    }, 
    accept: function(draggable){ 
     if (!$(this).hasClass('dropped') || draggable.hasClass('dropped')){ 
      return true; 
     } 
     return false; 
    }, 
    drop: function(event, ui) { 
     $(this).addClass('dropped'); 
     ui.draggable.addClass('dropped'); 
    }, 
    out: function(event, ui){ 
     $(this).removeClass('dropped'); 
     ui.draggable.removeClass('dropped'); 
    } 
});