jQuery UI Droppable：檢測將哪些可拖動對象拖放到元素上？

Question

我有jQuery UI框架的可拖動和可拖放元素。 我想以編程方式確定當前將哪些可拖動元素放置在哪些可放置元素上。 是否有捷徑可尋？

我想到了使用事件偵聽器檢測drop和out事件，然后在內存中保留字典或某些內容以進行跟蹤，但這似乎是人為的。

更好的主意？

Answer 1

您可以在元素放置到每個可放置對象中時將可放置對象唯一的類添加到元素中，然后使用選擇器獲取位於其各自可放置區域中的元素。 您將必須確保刪除該類，因為刪除了該可刪除類。

Answer 2

假設您有可以在其中放置項目的網上論壇。
這些組具有droppable的類，而Items具有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保存到字段或詞典中或任何需要的位置。

當您動態添加新項目或組時，這也適用。

Answer 3

在文檔網站上對此進行了解釋，但這里又是：

<script>
$(function() {
    $( "#catalog" ).accordion();
    $( "#catalog li" ).draggable({
        appendTo: "body",
        helper: "clone"
    });
    $( "#cart ol" ).droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept: ":not(.ui-sortable-helper)",
        drop: function( event, ui ) {
            $( this ).find( ".placeholder" ).remove();
            $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
        }
    }).sortable({
        items: "li:not(.placeholder)",
        sort: function() {
            // gets added unintentionally by droppable interacting with sortable
            // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
            $( this ).removeClass( "ui-state-default" );
        }
    });
});
</script>

制品

T恤

• Lolcat襯衫
• Cheezeburger襯衫
• 巴基特襯衫

手袋

• 斑馬條紋
• 黑色皮革
• 鱷魚皮

小工具

• 蘋果手機
• iPod的
• iPad的

購物車

ui.draggable.ATTRIBUTE（例如text（）attr（）或其他）就是您所需要的:)