javascript - 每个字母点击一次

Question

在我的游戏中，您必须单击字母才能拼出单词。当点击一个字母时，它会动画到网格中单词所在的区域。

当我单击一个字母并且它以动画形式显示到单元格时，我可以单击多个。我如何限制每个单元格只有一个字母。

我在想，只要动画播放完毕，就可以禁用点击功能，但我不知道该如何实现。

有人能指出我正确的方向吗？

这里是点击事件...

$('.drag').on('click', function(e) {
e.preventDefault();

var target = $('.drop-box.spellword:not(.occupied):first');
var targetPos = target.position();
var currentPos = $(this).offset();
var b = $(this);

if (target.length) {
    $(".minibutton").prop("disabled", true);
    b.clone().addClass(
    b.data("letter") == target.data("letter") ? "wordglow3" : "wordglow").appendTo("table").css({
        background: "transparent",
        position: "absolute",
        top: currentPos.top,
        left: currentPos.left
    }).animate({
        top: targetPos.top,
        left: targetPos.left
    }, "slow", function() {
        $(this).css({
            top: 0,
            left: 0
        }).appendTo(target);
        target.addClass("occupied");
    });

Answer 1

看起来您在动画完成后给目标一个名为“occupied”的类。难道你不能在点击一个字母后立即给它上“occupied”类吗？

if (target.length) {
        target.addClass("occupied"); // add immediately here