How do I link individual letters to a word? [closed]

问题

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.

Closed 7 years ago.

I am creating a word game where you have to spell the words in the grid by dragging the letters in from the side.

This code randomly generates 12 words from the "listOfWords" and dynamically creates a 6x6 table. The words are also split into single characters ("P""I""T") so draggable letters can be placed over to spell the words...

var listOfWords = ["mat", "cat", "dog", "pit", "pot", "fog", "log", "pan", "can", "man", "pin", "gag", "sat", "pat", "tap", "sap", "tag", "gig", "gap", "nag", "sag", "gas", "pig", "dig", "got", "not", "top", "pop", "god", "mog", "cot", "cop", "cap", "cod", "kid", "kit", "get", "pet", "ten", "net", "pen", "peg", "met", "men", "mum", "run", "mug", "cup", "sun", "mud", "rim", "ram", "rat", "rip", "rag", "rug", "rot", "dad", "sad", "dim", "dip", "did", "mam", "map", "nip", "tin", "tan", "nap", "sit", "tip", "pip", "sip", "had", "him", "his", "hot", "hut", "hop", "hum", "hit", "hat", "has", "hug", "but", "big", "bet", "bad", "bad", "bed", "bud", "beg", "bug", "bun", "bus", "bat", "bit", "fit", "fin", "fun", "fig", "fan", "fat", "lap", "lot", "let", "leg", "lit"];

var shuffledWords = listOfWords.slice(0).sort(function () {
return 0.5 - Math.random();
}).slice(0, 12);

var tbl = document.createElement('table');
tbl.className='tablestyle';
var wordsPerRow = 2;


for (var i = 0; i < shuffledWords.length; i += wordsPerRow) {
var row = document.createElement('tr');

for (var j=i; j < i + wordsPerRow; ++ j) {
    var word = shuffledWords[j];

    for (var k = 0; k < word.length; k++){
        var cell = document.createElement('td');


        cell.textContent = word[k];
        // IF FIREFOX USE cell.textContent = word[j]; INSTEAD
        row.appendChild(cell);
    }
}
tbl.appendChild(row);    
}

 document.body.appendChild(tbl);

Here is the code for the draggable letters that are dropped onto the grid to spell the words.

<div class="squares">

        <div id="drag1" class="drag ui-widget-content box-style2" tabindex="0">
        <p>a</p>
        </div>

        <div id="drag2" class="drag ui-widget-content box-style" tabindex="0">
        <p>b</p>
        </div>

        <div id="drag3" class="drag ui-widget-content box-style" tabindex="0">
        <p>c</p>
        </div>

        <div id="drag4" class="drag ui-widget-content box-style" tabindex="0">
        <p>d</p>
        </div>

        <div id="drag5" class="drag ui-widget-content box-style2" tabindex="0">
        <p>e</p>
        </div>

        <div id="drag6" class="drag ui-widget-content box-style" tabindex="0">
        <p>f</p>
        </div>

        <div id="drag7" class="drag ui-widget-content box-style" tabindex="0">
        <p>g</p>
        </div>

        <div id="drag8" class="drag ui-widget-content box-style" tabindex="0">
        <p>h</p>
        </div>

        <div id="drag9" class="drag ui-widget-content box-style2" tabindex="0">
        <p>i</p>
        </div>

         <div id="drag10" class="drag ui-widget-content box-style" tabindex="0">
        <p>j</p>
        </div>

        <div id="drag11" class="drag ui-widget-content box-style" tabindex="0">
        <p>k</p>
        </div>

        <div id="drag12" class="drag ui-widget-content box-style" tabindex="0">
        <p>l</p>
        </div>

        <div id="drag13" class="drag ui-widget-content box-style" tabindex="0">
        <p>m</p>
        </div>

        <div id="drag14" class="drag ui-widget-content box-style" tabindex="0">
        <p>n</p>
        </div>

        <div id="drag15" class="drag ui-widget-content box-style2" tabindex="0">
        <p>o</p>
        </div>

        <div id="drag16" class="drag ui-widget-content box-style" tabindex="0">
        <p>p</p>
        </div>

        <div id="drag17" class="drag ui-widget-content box-style" tabindex="0">
        <p>r</p>
        </div>

        <div id="drag18" class="drag ui-widget-content box-style" tabindex="0">
        <p>s</p>
        </div>

        <div id="drag19" class="drag ui-widget-content box-style" tabindex="0">
        <p>t</p>
        </div>

        <div id="drag20" class="drag ui-widget-content box-style2" tabindex="0">
        <p>u</p>
        </div>

How do I make the words recognize the correct letters when they are dropped on top?

Something along these lines....

if ("mat" == drag13 + drag1 + drag19) {
            return true;
        }
        else {
            return false;
        }

回答1:

I've made you a simplified version with drag and drop enabled. Note that, in this example, it is useless (and inadvisable) to split the words into letters.

I've used HTML5 custom data attributes, but you can also use the id to store the words and letters.

Example: jsFiddle (drag 3 letters to a word)

You should also read docs on droppable and draggable.

来源：https://stackoverflow.com/questions/11507072/how-do-i-link-individual-letters-to-a-word