jQuery 拖/放 - 每个“拖放”的模式都有不同的模式物品？

发布于 2024-12-14 20:50:01 字数 743 浏览 1 评论 0原文

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

    $( "#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 将为每个项目打开。我需要一种方法来为每件食物（火鸡腿、苹果等）打开不同的对话框。有道理吗？

原文

Just got my other question answered (modal wasn't opening on drop). Now I have a new problem:

    $( "#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 is the modal that will open when the piece of corn is dropped. li.corn is the piece of corn that's "draggable" and #plate is the div that's "droppable", but as you can see it has no way of knowing which element was being dragged/dropped so the #cornDialog would open for every item. I need a way to get a different dialog to open for each piece of food (turkey leg, apple, etc). Make sense?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寂寞花火° 2024-12-21 20:50:01

如果您将“cornid”的 jQuery 数据属性添加到每个可拖动的 li.corn 中，您可以执行类似的操作this：

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

If you add a jQuery data attribute of "cornid" to each draggable li.corn you can do something like this:

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

If you post information about how you create your "li.corn"s I can advise about how to add the jQuery data attribute.

回复收藏 0 原文

~没有更多了~