1

私の他の質問に答えました（ドロップ時にモーダルが開きませんでした）。今、私は新しい問題を抱えています:

    $( "#table #food li.corn" ).draggable({
            元に戻す:「無効」、
            hoverClass: "ui-state-active"
    });
    $( "#plate ul" ).droppable({
        hoverClass: "ui-state-active",
        ドロップ：関数（イベント、UI）{
            $(this).addClass( "ui-state-highlight" );
            $( "#cornDialog" ).dialog( "開く" );
        }
    });
    $( "#cornDialog" ).dialog({
        オートオープン: false,
        show: "ブラインド",
        非表示: 「遅い」
    });

#cornDialogは、トウモロコシをドロップしたときに開くモーダルです。li.cornは「ドラッグ可能」なトウモロコシで、#plateは「ドロップ可能」な div ですが、ご覧のとおり、どの要素がドラッグ/ドロップされたかを知る方法がないため、すべてのアイテムに対して#cornDialogが開きます. 食べ物 (七面鳥の脚、リンゴなど) ごとに異なるダイアログを開く方法が必要です。わかる？

4

1 に答える 1

0

ドラッグ可能な各 li.corn に「cornid」のjQuery データ属性を追加すると、次のようなことができます。

$( "#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 データ属性を追加する方法についてアドバイスできます。

于 2011-11-11T01:23:43.973 に答える