2016-08-17 21 views
0

ユーザーが文字をドロップすることができるテキストボックスのリストがありますが、間違った文字がテキストボックス内にドロップされた場合は、addClass("danger")に入力してください。誤った文字のテキストボックス私はまた、問題を説明するスクリーンショットを添付しました。

demo

テキストボックスには、割り当てられたboxの名前のクラスがあります。

今、私のドロップ機能を以下に示します。

function dropabc(event) { 

    if ($(objBox).attr("correct1") != event.target.id) { 

     $(".imageError").fadeIn('slow').delay(1000).hide(0); 
     console.log("error"); 
     $(this).addClass('danger'); 

    } else { 

     console.log(event.target.id); 
     console.log("ok"); 
    } 
} 

$(this).addClass("danger") 

しかし、これは動作していない、私は間違った値がドロップされているボックスにdangerクラスを追加します。

//makes all the textbox red 
$(".box").addClass("danger") 

ご協力いただければ幸いです。

これが正常に動作しているjQueryのUIのドラッグ&ドロップ可能機能です:

 var objBox; 
    $('.drag').draggable({ 

revert: true, 
     helper: 'clone', 
     cursor: 'pointer', 

     start: function(event, ui) { 

      $(this).fadeTo('fast', 0.5); 
       objBox=$(this); 
     }, 
     stop: function(event, ui) { 
      $(this).fadeTo(0, 1); 
    } 
}); 

$("#textbox, .box").droppable({ 
    hoverClass: "hoverPath", 
    drop: function(event, ui) { 

       var $this = $(this); 
         if ($this.val() == '') { 
          $this.val(ui.draggable.text()); 
          $(this).addClass("checkDiv"); 
          $(this).each(function(i, el){ 
         $(el).addClass(myid[3]); 
             }); 

         } 

     var empty = $(this).parent().find("input").filter(function() { 
      return this.value === ""; 
     }); 
     if(empty.length) { 
     console.log(empty.length); 
     } 
     else{ 
      console.log("done"); 
     } 

        } 
}); 

これは、テキストボックスの数をエコーされたPHPコードです:

for($x = 0 ; $x < count($code_words); $x++){ 

    echo "<input id='".$code_words[$x]."' ondrop='dropabc(event)' class='box' type='textbox'/>"; 

     } 
+0

、例えば、私は手紙をドロップする場合は、「t」の

:)あなたを助けたが、それはすべきではないグレート私はそれを落としたクラスに「危険」クラスを追加する必要がありますか? – Evochrome

+0

はい私はこれをやりたいと思っています –

+0

私たちが編集できる例がありますか? JSFiddleやCodepenのように? – Evochrome

答えて

1

あなただけ実行しています入力タグの中にondropイベントを埋め込むときの関数。

埋め込みの代わりに、jQuery on("drop")を試してみてください。

$(document).on("drop", ".box", function(event){ 
     if ($(objBox).attr("correct1") != event.target.id) { 

     $(".imageError").fadeIn('slow').delay(1000).hide(0); 
     console.log("error"); 
     $(this).addClass('danger'); 

    } else { 

     console.log(event.target.id); 
     console.log("ok"); 
    } 
}) 

上のテキストボックス、それは下のテキストボックスにそう乾杯、

関連する問題