私の単語ゲームでは、完成させるために文字をドラッグアンドドロップする単語をユーザーに示すスタイルがあります。
次に、ユーザーがその領域に文字をドロップできるようにしますが、ユーザーが必要な場所に文字を配置することを制限しないため、ユーザーは最初の文字をスタイル領域の最初のセルにのみ配置できます。
これは、ボタンをクリックするだけで指定された単語にスタイルを適用するコードです (#picknext)...
$('#pickNext').click(function() {
// remove the class from all td's
$('td').removeClass('spellword');
// pick a random word
rndWord = shuffledWords.sort(function() {
return 0.8 - Math.random();
})[0];
// apply class to all cells containing a letter from that word
$('td[data-word="' + rndWord + '"]').addClass('spellword');
});
理想的には、文字が正しい位置にドロップされていない場合、文字を元に戻したいと考えています。
文字の元に戻す機能に既に適用した追加のコードがいくつかあります。それが役立つことを願っています...
$('.drag').draggable({
helper: 'clone',
snap: '.drop',
grid: [60, 60],
revert: function(droppable) {
if (droppable === false) {
return true;
}
else {
return false;
}
}
});