jQuery UI Droppable：检测哪些draggables被丢弃在一个元素上？

Question

我有jQuery UI框架的draggable和droppable元素工作。我想以编程方式确定哪些可拖动元素当前放在哪些可放置元素上。有一个简单的方法吗？

我想过使用事件监听器来检测drop和out事件，然后在内存中保留字典或其他内容以便跟踪，但这似乎是人为的。

更好的想法？

Answer 1

您可以在每个droppable中删除元素时将droppable的唯一类添加到元素中，然后使用选择器获取各自可放置区域中的元素。您必须确保删除该类，因为它们被移除了那个可以删除的类。

Answer 2

假设您有可以放置项目的组。
这些组有一个类droppable，而这些项目有一个类draggable。

$('.droppable').each(function() {
    var currentGroupId = $(this).attr('id') //
    $(this).find('.draggable').each(function() {
        //get id of dropped item in current group 
        var droppedItemId = $(this).attr('id');         
    }
}

您可以将具有该组中已删除项目ID的组的ID保存到字段或字典或任何您想要的位置。

当您动态添加新项目或组时，这也适用。