0

我与 4 个拖动对象进行了拖放交互，并且我想在用户将所有拖动元素放置到正确的目标上之后使用 fancybox 打开一个反馈框——所有不正确的答案都会将拖动对象捕捉回它的原始位置。我能够弄清楚如何为另一个在提交按钮上注册点击事件的交互打开fancybox，但是这个需要从“if”语句启动。搜索解决方案后，我发现了如何打开 fancybox 并加载包含反馈消息的 html 页面，但我不知道如何添加格式化内容的自定义类。

以下是我成功启动其他花式框弹出窗口的方法：

<div class="image right">
    <a class="have-popup fancybox.ajax" href="ajax/shire_lifecycle_05b.html"><img src="css/images/image5.jpg" alt="" /></a>>

我需要将上面的类添加到下面的代码中。任何帮助将不胜感激。

var correctSr18 = 0;


 $('.steps-drag-drop .dragable .drag-item').draggable({ 
    snap: ".placeholder",
    revert: "invalid", 
    snapMode: "inner"


});

$(".steps-drag-drop .placeholder1").droppable({
  accept : ".step2",
  drop: function( event, ui ) {
    $( this ).addClass( "ui-state-highlight" );
    correctSr18++;




    //alert(correctSr18);
    if ( correctSr18 == 4 ) {
    //alert("correct");

    $( this ).addClass( "have-popup fancybox.ajax" );
    $.fancybox.open([
    {
        type: 'iframe',
        href : 'ajax/message-popup-scr18.html'                

    }
], {
    padding : 0

})

}
  }
});

$(".steps-drag-drop .placeholder2").droppable({
  accept : ".step3",
  drop: function( event, ui ) {
    $( this ).addClass( "ui-state-highlight" );
    correctSr18++;

    //alert(correctSr18);

    if ( correctSr18 == 4 ) {
    //alert("correct");

    $.fancybox.open([
    {
        type: 'iframe',
        href : 'ajax/message-popup-scr18.html'                

    }
], {
    padding : 0
});

}
  }
});

$(".steps-drag-drop .placeholder3").droppable({
  accept : ".step1",
  drop: function( event, ui ) {
    $( this ).addClass( "ui-state-highlight" );
    correctSr18++;
    //alert(correctSr18);
    if ( correctSr18 == 4 ) {
    //alert("correct");

    $.fancybox.open([
    {
        type: 'iframe',
        href : 'ajax/message-popup-scr18.html'
    }
], {
    padding : 0
});

}
  }
});

$(".steps-drag-drop .placeholder4").droppable({
  accept : ".step4",
  drop: function( event, ui ) {
    $( this ).addClass( "ui-state-highlight" );
    correctSr18++;
    //alert(correctSr18);
    if ( correctSr18 == 4 ) {
    //alert("correct");

    $.fancybox.open([
    {
        type: 'iframe',
        href : 'ajax/message-popup-scr18.html'
    }
], {
    padding : 0
});

}
  }
});
4

0 回答 0