如何Dynamiclly設置接受幾個Droppable

Question

你可以請看看This Demo並讓我知道如何使用只能調用一次.droppable（）與接受選項的可拖動元素被接受通過下降與特定ID /所以：

dropboxt0接受dragboxt0
dropboxt1接受dragboxt1
dropboxt2接受dragboxt2
dropboxt3接受dragboxt3
dropboxt4接受dragboxt4

我用下面的代碼

$(".dragbox").draggable(); 
$(".dropbox").droppable({ 
    accept: $(this).attr('id'), 
    drop: function (event, ui) { 
     $(this) 
      .addClass("ui-state-highlight") 
      .html("Dropped!"); 
    } 
}); 

但它不是做的工作。

感謝

Answer 1

的問題在這裏已經討論：中jquery droppable accept

而不是使用一個單一的選擇了接受，你可以使用一個功能，即必須返回true或false。在功能裏面，有很多方法可以達到你想要的行爲。我選擇了以下內容：

<div id="container"> 
    <div class="dropbox" data-drop-id="db01"></div> 
    <div class="dropbox" data-drop-id="db02"></div> 
    <div class="dropbox" data-drop-id="db03"></div> 
    <div class="dropbox" data-drop-id="db04"></div> 
    <div class="dragbox" data-drag-id="db01"></div> 
    <div class="dragbox" data-drag-id="db02"></div> 
    <div class="dragbox" data-drag-id="db03"></div> 
    <div class="dragbox" data-drag-id="db04"></div> 
</div> 

JS與接受 - 函數，返回true或false：

$(".dropbox").droppable({ 
accept: function (myDragBox) { 
    var id_group_drop, id_group_drag; 
    //get the "id_group" stored in a data-attribute of the draggable 
    id_group_drag = $(myDragBox).attr("data-drag-id"); 
    //get the "id_group" stored in a data-attribute of the droppable 
    id_group_drop = $(this).attr("data-drop-id"); 
    //compare the id_groups, return true if they match or false otherwise 
    return id_group_drop == id_group_drag; 
}, 
drop: function (event, ui) { 
    $(this) 
     .addClass("ui-state-highlight") 
     .html("Dropped!"); 
} 

}）;

對我來說比較重要的是，drop和dragbox的id是一樣的。因此，我沒有使用id屬性，但我自己的數據-id屬性，因爲我喜歡我的ID是唯一的......

看到演示的位置：http://jsfiddle.net/u9w63y2q/1/