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

【问题标题】：jQuery drag/drop - different modal for each "dropped" item?jQuery拖放 - 每个“丢弃”项目的不同模式？
【发布时间】：2011-11-11 00:32:48
【问题描述】：

刚刚回答了我的另一个问题（模态在放置时未打开）。现在我有一个新问题：

$( "#table #food li.corn" ).draggable({ 还原：“无效”， hoverClass: "ui-state-active" }); $( "#plate ul" ).droppable({ hoverClass: "ui-state-active", 下降：函数（事件，用户界面）{ $(this).addClass("ui-state-highlight"); $("#cornDialog").dialog("open"); } }); $( "#cornDialog" ).dialog({ 自动打开：假，显示：“盲”，隐藏：“慢” });

#cornDialog 是在玉米片掉落时打开的模式。 li.corn 是“可拖动”的玉米片，#plate 是“可拖放”的 div，但正如您所见，它无法知道哪个元素正在被拖放，因此 #cornDialog 将为每个项目打开。我需要一种方法来为每块食物（火鸡腿、苹果等）打开一个不同的对话框。有意义吗？

【问题讨论】：

标签： jquery drag-and-drop jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

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

$( "#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 数据属性。

【讨论】：