**编辑**
我目前正在创建一个拖放拼写游戏,用户将字母拖到突出显示的单词上,以便拼写并显示背后的图像.
当单词以样式".spellword"突出显示时,它向用户指示拼写该单词.当用户将字母拖入该区域时,他/她可以将字母拖动到3个字母空间中的任何位置,但是我需要将它们从"左"移到"右"以确保单词以正确的顺序拼写.
基本上,当一个字母被放到单词上时,我需要它向左边(单词的第一个字母),然后下一个字母删除按下单词的下一个字母等...所以它拼写顺序正确
我该怎么做才能确保这一点?
draggable和droppable的脚本是......
$('.drag').draggable({
helper: 'clone',
snap: '.drop',
grid: [62, 62],
revert: 'invalid',
snapMode: 'corner',
start: function(){
var validDrop = $('.drop-box.spellword');
validDrop.addClass('drop');
makeDroppables();
}
});
function makeDroppables(){
$('.drop').droppable({
drop: function(event, ui) {
word = $(this).data('word');
guesses[word].push($(ui.draggable).attr('data-letter'));
if ($(this).text() == $(ui.draggable).text().trim()) {
$(this).addClass('wordglow3');
} else {
$(this).addClass('wordglow');
}
if (guesses[word].length == 3) {
if (guesses[word].join('') == word) {
$('td[data-word=' + word + ']').addClass('wordglow2');
} else {
$('td[data-word=' + word + ']').addClass("wordglow4");
guesses[word].splice(0, guesses[word].length);
}
}
},
activate: …Run Code Online (Sandbox Code Playgroud)