Edit Question - KnowledgeHub

Title Body

**EDIT* * I am currently creating a drag and drop spelling game where the user drags letters onto the highlighted word in order to spell it and reveal the image behind. When a word is highlighted by the style ".spellword", it indicates to the user to spell that word. When the user goes to drag a letter into that area he/she can drag the letter anywhere in the 3 letter space, but I need them to be dropped from "left" to "right" to ensure the word is spelt in the correct order. Basically when a letter is dropped onto the word I need it to snap to the left (first letter of the word) and then the next letter dropped snaps onto the next letter of the word etc...so it is spelt in the correct order What can I do to ensure this? The script for the draggable and droppable is... $('.drag').draggable({ helper: 'clone', snap: '.drop', grid: [62, 62], revert: 'invalid', snapMode: 'corner', start: function(){ var validDrop = $('.drop-box.spellword'); validDrop.addClass('drop'); makeDroppables(); } }); function makeDroppables(){ $('.drop').droppable({ drop: function(event, ui) { word = $(this).data('word'); guesses[word].push($(ui.draggable).attr('data-letter')); if ($(this).text() == $(ui.draggable).text().trim()) { $(this).addClass('wordglow3'); } else { $(this).addClass('wordglow'); } 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'); } }); } </cod

Tags (comma-separated) Cancel