Question

刚刚回答了我的另一个问题（模态没有打开）。现在我遇到了一个新问题：

    $( "#table #food li.corn" ).draggable({
            revert: "invalid",
            hoverClass: "ui-state-active"
    });
    $( "#plate ul" ).droppable({
        hoverClass: "ui-state-active",
        drop: function( event, ui ) {
            $(this).addClass( "ui-state-highlight" ); 
            $( "#cornDialog" ).dialog( "open" );
        }
    });
    $( "#cornDialog" ).dialog({
        autoOpen: false,
        show: "blind",
        hide: "slow"
    });

#cornDialog 是玉米掉落时会打开的模态。 li.corn 是“可拖动”的玉米片， #plate 是“可放置”的div，但是你可以看到它无法知道哪个元素被拖放，所以每个项目都会打开 #cornDialog 。我需要一种方法来为每块食物（火鸡腿，苹果等）打开一个不同的对话框。有意义吗？

Answer 1

如果您为每个可拖动的li.corn添加jQuery data attribute“cornid”，您可以执行以下操作：

$( "#plate ul" ).droppable({
    hoverClass: "ui-state-active",
    drop: function( event, ui ) {
        $(this).addClass( "ui-state-highlight" ); 
        $( "#cornDialog" + $(ui.draggable).data("cornid") ).dialog( "open" );
    }
});

如果您发布有关如何创建“li.corn”的信息，我可以建议如何添加jQuery数据属性。

jQuery拖放 - 每个“丢弃”项目的不同模态？

1 个答案: