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（）或其他）就是您所需要的:)