Question

我创建了两个包含拖放元素的练习，完美地运行。你可以在这里看到演示 - 1）**http://jsfiddle.net/hirenwebdp/ccf4Q/17/** 2）**http://jsfiddle.net/hirenwebdp/ccf4Q/17/**

现在我合并了一个jsfiddle中的两个文件都在这里 - **http://jsfiddle.net/ccf4Q/41/**

问题：当所有可拖动元素都位于完美位置时，我不知道如何显示消息。

现在这里是可拖动元素的完美位置请参阅快照 - 1）http://screencast.com/t/jqNDeBNQ 2）http://screencast.com/t/ARWdIrKbWoDc

我可以显示信息，但无法显示完美信息此外，我无法处理特定练习的显示消息，

请给我建议，以便我可以改进我的代码

这是我在合并练习中使用的jquery代码

$("#products li").draggable({
    appendTo: "body",
    helper: "clone"

});
attachPostToBank(1);
attachPostToBank(2);
attachPostToBank(3);
attachPostToBank(4);
attachPostToBank(5);
attachPostToBank(6);
attachPostToBank(7);
attachPostToBank(8);
attachPostToBank(9);
attachPostToBank(10);
attachPostToBank(11);
attachPostToBank(12);
attachPostToBank(13);
attachPostToBank(14);
attachPostToBank(15);
function test(event, ui)
{
    $(this).find(".placeholder").remove();
       var productid = ui.draggable.attr("data-id");
       if ($(this).find("[data-id=" + productid + "]").length) return;
        var listItem = $("<li></li>", {
           "text": ui.draggable.text(),
           "data-id": productid
        });
        $(this).html(listItem);
        // To remove item from other shopping chart do this
       // var cartid = self.closest('.shoppingCart').attr('id');
      //  $(".shoppingCart:not(#"+cartid+") [data-id="+productid+"]").remove();          
           var isAllFilled = checkCompletionStatus(getParent(this));
        if(isAllFilled)
        {
          event1.call(this,event,ui)
          event2.call(this,event,ui)
        }
}
function attachPostToBank(i){
    var bankable = "bank"+i;
    console.log("#"+bankable);
    $("."+bankable).droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept : ".credit"+i,
        drop: function(event, ui) {
             test.call(this,event, ui);
        }
    }).sortable({
        items: "li:not(.placeholder)",
        sort: function() {
            $(this).removeClass("ui-state-default");
        }
    });
}
function getParent(draggedElem)
{
    var tableId=$(draggedElem).parents("table").attr("id");
    //alert(tableId);
    console.log(tableId);
    return tableId;
}
function checkCompletionStatus(tableId){

      var isAllFilled = true;
      $("#"+tableId+" .shoppingCart").each(function(){
            if($(this).find('ol .placeholder').length > 0)
            {
                isAllFilled = false;
                return
            }
      });
      return isAllFilled
}   
function event1(event,ui)
{
    $("#shoppingCart1 ol").data("contains",$(ui.draggable[0]).text().trim());
    $("#shoppingCart2 ol").data("contains",$(ui.draggable[0]).text().trim());
    $("#shoppingCart3 ol").data("contains",$(ui.draggable[0]).text().trim());
    $("#shoppingCart4 ol").data("contains",$(ui.draggable[0]).text().trim());    
                {
            if($("#shoppingCart1 ol").data("contains")&&$("#shoppingCart1   ol").data("contains")=="Dr" && $("#shoppingCart2 ol").data("contains")&&$("#shoppingCart2   ol").data("contains")=="$10000" &&  $("#shoppingCart3 ol").data("contains")&&$("#shoppingCart3   ol").data("contains")=="Cr" && $("#shoppingCart4 ol").data("contains")&&$("#shoppingCart4   ol").data("contains")=="$10000" )
            {
                 $("#equal").show();
             $("#equal a").html("CONGRATULATION ! PERFECT.");

            }           
                    else
                    {

                 $("#equal").show();
             $("#equal a").html("TRY AGAIN.");
                    }
        }          
        }
function event2(event,ui)
{
    $("#shoppingCart5 ol").data("contains",$(ui.draggable[0]).text().trim());
    $("#shoppingCart6 ol").data("contains",$(ui.draggable[0]).text().trim());
    $("#shoppingCart7 ol").data("contains",$(ui.draggable[0]).text().trim());
    $("#shoppingCart8 ol").data("contains",$(ui.draggable[0]).text().trim());    
                {
            if($("#shoppingCart5 ol").data("contains")&&$("#shoppingCart5   ol").data("contains")=="Dr" && $("#shoppingCart6 ol").data("contains")&&$("#shoppingCart6   ol").data("contains")=="$500" &&  $("#shoppingCart7 ol").data("contains")&&$("#shoppingCart7   ol").data("contains")=="Cr" && $("#shoppingCart8 ol").data("contains")&&$("#shoppingCart8   ol").data("contains")=="$500" )
            {
                 $("#equal1").show();
             $("#equal1 a").html("CONGRATULATION ! PERFECT.");

            }

                    else
                    {

                 $("#equal1").show();
             $("#equal1 a").html("TRY AGAIN.");
                    }
        }
        }

请帮助

如何在完美位置拖放元素后显示消息？

0 个答案: