javascript - 如何将我的拖放变成点击事件?

标签 javascript jquery jquery-ui

我有一个拖放游戏,我现在正在考虑更改它。

基本上有一个带有单词的网格,要拼写的单词被突出显示。通常你会拖放字母来完成单词,但我现在正在考虑这样做,以便用户点击字母,它们就会出现在突出显示的区域。

这是它的脚本......

$('#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;
    }
}
});


$(".drop").droppable({
drop: function(event, ui) {
    word = $(this).data('word');

    guesses[word].push($(ui.draggable).attr('data-letter'));
    console.log($(event));
    console.log($(ui.draggable).text());

    console.log('CHECKING : ' + $(this).text() + ' against ' + $(ui.draggable).text().trim());


    if ($(this).text() == $(ui.draggable).text().trim()) {

        $(this).addClass('wordglow3');
    } else {
        $(this).addClass('wordglow');
    }
    console.log('CHECKING : ' + $(this).text() + ' against ' + $(ui.draggable).text().trim());


    console.log(guesses);

    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: function(event, ui) {
    word = $(this).data('word');

    // try to remove the class
    $('td[data-word=' + word + ']').removeClass('wordglow').removeClass('wordglow4').removeClass('wordglow3');
}


});

我将如何着手改变它?谢谢

最佳答案

我不敢说由于代码结构的巨大变化,你最好从头开始这部分

http://weepy.github.com/jquery.path/

试试这些例子,祝你好运。

关于javascript - 如何将我的拖放变成点击事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11650769/

相关文章:

jquery-ui - jquery mobile内部页面的ajax实现

javascript - JQuery:更新表内容花费太长时间

javascript - 此代码不会在 jquery-3.1.0.js 上运行

javascript - 使用 render.text.css 拍摄 HighChart 的快照

jquery - $(window).resize 函数实时

jquery - 当提交按钮名为 "submit"时,为什么我的表单没有提交?

javascript - 将 jQuery 自动完成数据附加到 textarea 内容而不是覆盖它

javascript - jQuery UI Accordion 展开/折叠全部

javascript - 删除 `package-lock.json`快速解决冲突

javascript - HTML/JavaScript : Fix scroll position after screen rotation