高亮區域完成

在我的拖放遊戲中，有一個網格填充了對用戶隱藏的單詞。遊戲的目的是藉助聲音和圖片拼出這些單詞。用戶通過將相關字母拖放到網格上來拼出單詞。高亮區域完成

此時用戶可以在突出顯示區域（單詞）的任何位置拖放字母，腳本將其滑入位置。這一切都很好，但我想強調用戶應該放棄該字的單詞內的實際位置。

目前突出顯示的單詞被稱爲「.spellword」，它發紫光。我創建了一個名爲「.spellLetter」的類，它發出白色的光，我想指出要放入的空間。任何人都可以幫忙嗎？

這裏是類適用於電網的腳本...

$('.drag').draggable({ 
    helper: 'clone', 
    snap: '.drop', 
    grid: [62, 62], 
    revert: 'invalid', 
    snapMode: 'center', 
    start: function() { 
     var validDrop = $('.drop-box.spellword'); 
     validDrop.addClass('drop'); 
     makeDroppables(); 
     $(right).val(''); 
     $(wrong).val(''); 
    } 

});

小提琴幫助 - http://jsfiddle.net/smilburn/Dxxmh/57/

來源

2012-10-10 sMilbz

我編輯了自己的小提琴。在this版本，當你開始拖動時，spellLetter類（使用相同的數據字母屬性droppables）適用於所有可能的目標那封信我添加到您的拖曳開始處理程序中的說法是：

$('.spellword[data-letter="'+e.target.getAttribute("data-letter")+'"]').addClass('spellLetter')

即找到當前活動的spellword類的所有元素，並使用與當前拖動的元素相同的數據字母，並將類spellLetter添加到它們。

這是你要求的嗎？

編輯：Improved使目標突出停止，當你不拖

來源

2012-10-10 09:22:53

這聽起來像什麼，我需要的，但似乎並沒有爲我工作。你使用的是什麼瀏覽器？ @Asad – sMilbz

Firefox。不工作，因爲不應用課堂？請注意，直到幾秒前，鏈接到的小提琴實際上沒有定義.spellLetter類。它只是應用於課堂;沒有css規則。我剛剛編輯它，所以.spellLetter有一個白色的背景。 –

你可以嘗試在我的新小提琴上編輯它... http://jsfiddle.net/smilburn/Dxxmh/63/我有一些需要的變化@Asad – sMilbz

高亮區域完成

回答

相關問題