0
ユーザーが文字をドロップすることができるテキストボックスのリストがありますが、間違った文字がテキストボックス内にドロップされた場合は、addClass("danger")
に入力してください。誤った文字のテキストボックス私はまた、問題を説明するスクリーンショットを添付しました。
テキストボックスには、割り当てられた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'/>";
}
、例えば、私は手紙をドロップする場合は、「t」の
:)あなたを助けたが、それはすべきではないグレート私はそれを落としたクラスに「危険」クラスを追加する必要がありますか? – Evochrome
はい私はこれをやりたいと思っています –
私たちが編集できる例がありますか? JSFiddleやCodepenのように? – Evochrome