小编m0o*_*nio的帖子

掉落时留下可拖动的按扣

**编辑**

我目前正在创建一个拖放拼写游戏,用户将字母拖到突出显示的单词上,以便拼写并显示背后的图像.

当单词以样式".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)

javascript jquery drag-and-drop jquery-ui

8
推荐指数
1
解决办法
757
查看次数

标签 统计

drag-and-drop ×1

javascript ×1

jquery ×1

jquery-ui ×1