0

現時点では、ドラッグ可能なオブジェクトをグリッド内のどこにでもドロップできます。

スタイルで強調表示されているゾーンにドラッグ可能がドロップされていない場合は、ドラッグ可能を元に戻す必要があります。

どうすればいいですか？

現在、ドラッグ可能なグリッドからドロップされない場合は、元に戻すようにしています...

    $('.drag').draggable({

    helper: 'clone',
    snap: '.drop',
    grid: [60, 60],
    revert: 'invalid',
 });

希望のドロップゾーンを選択する関数は次のとおりです。

    $('#pickNext').mousedown(function() {
    // remove the class from all td's
    $('td').removeClass('spellword');
    // pick a random word
    var r = rndWord;
    while (r == rndWord) {
    rndWord = Math.floor(Math.random() * (listOfWords.length));
}
    // apply class to all cells containing a letter from that word
    $('td[data-word="' + listOfWords[rndWord].name + '"]').addClass('spellword');
});

このようなもの...

    $('.squares').draggable({

    drop: function(event, ui){
    if (squares.drop ! word) {
    revert: 'invalid'
    }

  }

});

またはこれ..

$('.squares').draggable({

    drop: function(event, ui) {
        if ($(this).text() == $(ui.draggable).text().trim()) {
            revert: 'valid'
        }
                else {
                revert: 'invalid'
    }
                }
});
4

1 に答える 1

0

drop文字のドラッグを開始するたびに、指定された文字に一致する新しい新しいゾーンを作成する必要があります。現在、すべての文字はですがdroppable、これはあなたが望むものではありません。

makeDroppables()そのために、文字がドラッグされ始めるたびに呼び出される関数を使用してドロップゾーンを作成するようにJSFiddleを変更しました。

作業中のJSFiddle

注：回答は、質問にぴったり合うように編集されています。

また、ドラッグ可能なjQueryUIドキュメントから：

「無効に設定すると、ドラッグ可能なものがドロップ可能なものにドロップされていない場合にのみ、元に戻すことができます。」

于 2012-07-31T18:13:42.357 に答える