Question

目前我的可拖动物可以放在网格中的任何地方。

如果没有放下样式突出显示的区域，我需要拖动它们才能恢复。

我该怎么做？

目前我已经让他们恢复了，如果他们没有退出可拖动的网格，就像这样......

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

Answer 1

每次开始拖动字母时，您都需要创建与给定字母匹配的新的drop区域。目前，每封信都是droppable，这不是您想要的。

为此，我每次在拖动字母时都修改你的JSFiddle以使用一个名为makeDroppables()的函数创建放置区。

Working JSFiddle

注意：编辑答案以更贴近问题。

此外，来自jQuery UI docs on draggable：

“如果设置为无效，则仅会发生还原如果可拖动的东西没有放在掉落的地方。“

恢复拖拽

1 个答案: