개별 문자를 단어에 연결하려면 어떻게합니까?

Question

나는 측면에서 글자를 끌어 그리드의 철자를 입력해야하는 단어 게임을 만들고 있습니다.

이 코드는 "listOfWords"에서 임의로 12 단어를 생성하고 동적으로 6x6 테이블을 생성합니다. 단어는 여기에

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); 

은 드래그 문자에 대한 코드입니다 ... 그래서 드래그 글자가 단어를 철자 이상 배치 할 수 있습니다 하나의 문자 ("P" "I" "T")로 분할된다 그리드 위에 떨어 뜨려 단어 철자를 그렸다.

<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> 

단어를 맨 위에 떨어 뜨렸을 때 올바른 문자를 인식하도록하려면 어떻게해야합니까? 나는이 활성화 드래그 앤 드롭으로 당신에게 단순화 된 버전을했습니다

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

Answer 1

이 라인을 따라

뭔가 .... 이 예제에서 단어를 문자로 분리하는 것은 쓸데없는 (그리고 권장 할 만 함) 점에 유의하십시오.

HTML5 맞춤 데이터 속성을 사용했지만이 ID를 사용하여 단어와 문자를 저장할 수도 있습니다.

예 : jsFiddle (드래그 단어 3 글자) 또한 낙하 할 및 드래그에 docs을 읽어야

.