droppable on range

http://stackoverflow.com/a/11944085/922168

HTML

<body> 
  <div class="maincontain">
  <div class="container">
  <img src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2010/11/1.collection-of-character-mascot-illustrator-tutorial.jpg">
  
    <ul style="display:none;" id="wordlist">
     
        <li data-word="mum" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav" data-pic="http://www.clker.com/cliparts/5/e/7/f/1195445022768793934Gerald_G_Lady_Face_Cartoon_1.svg.med.png"></li>
      
        <li data-word="cat" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav" data-pic="http://www.clker.com/cliparts/c/9/9/5/119543969236915703Gerald_G_Cartoon_Cat_Face.svg.med.png"></li>
      
        <li data-word="dog" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav" data-pic="http://www.clker.com/cliparts/e/9/4/1/1195440435939167766Gerald_G_Dog_Face_Cartoon_-_World_Label_1.svg.med.png"></li>
      
        <li data-word="bug" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav" data-pic="http://www.clker.com/cliparts/4/b/4/2/1216180545881311858laurent_scarabe.svg.med.png"></li>
      
        <li data-word="rat" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav" data-pic="http://www.clker.com/cliparts/C/j/X/e/k/D/mouse-md.png"></li>
      
        <li data-word="dad" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav" data-pic="http://www.clker.com/cliparts/H/I/n/C/p/Z/bald-man-face-with-a-mustache-md.png"></li>
        
        <li data-word="cop" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav" data-pic="http://www.clker.com/cliparts/1/4/c/5/1194984609285255522police_man_ganson.svg.med.png"></li>
        
        <li data-word="pig" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav" data-pic="http://www.clker.com/cliparts/6/c/c/c/13286504431247546768Simple%20Pig%20Cartoon.svg.med.png"></li>
        
        <li data-word="sun" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav"...

CSS

.drag {

    display:block;
    height:61px;
    line-height:25px;
    width:61px;
    text-align: center;
    background:#ddd;    
    float:left;  
    -webkit-transition: -webkit-transform 0.1s ease-in;
}

.drag :hover {

    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);  
    
    
}

table {
    clear:both;
    line-height:25px;
     text-align:center;    

}

.drop-box {
   
    height:61.5px;
    width:61.5px;
    cursor: move;
    -moz-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
    opacity: 1;

}

.maincontain {
    height: 800px;
    width: 868px;
    border: solid 8pt lightgreen;
    
    -webkit-box-shadow: 4px 4px 4px green;
    -moz-box-shadow: 4px 4px 4px green;
    box-shadow: 4px 4px 4px green;  
    background: #cc66ff;
    
        
}


.container {
       
    height: 800px;
    overflow: hidden;
    position: relative;
    width: 1000px;
        
}

.container > img {
        
    height: 800px;
    position: absolute;
    width: 373px;
    
    cursor: move;
                  
}

table {
    margin: 0;
    padding: 0;
    line-height: 56px;
               
}
 
article, aside, figure, footer, header, hgroup,
menu, nav, section {
    
    display: block;    
}
  
table td {
    
    border: 1px solid white;
    border-style: dashed;
    position: relative;
    vertical-align: top;
    
    cursor: move;
    
    min-height:60px;
    max-width:60.3px;
    min-width:60.3px;
    max-height:60px;
    background: #cc66ff;
    float:left;
         
}
    
table td div {
         
    position: absolute;
   
    width: 59.5px;
    height: 59.5px;
    cursor: move;
    opacity: 1;
}

.tablestyle{
  
    left: 10px;
    position: absolute;
    top: 10px;
    color: white;
    font-family: arial;
    font-size: 35pt;
    text-align: center;
       
}

.spellword {
 
    -webkit-box-shadow: inset 0px 0px 10px 5px purple;
    box-shadow: inset 0px 0px 10px 5px purple;
    
    
}
      ...

JavaScript

var listOfWords = [];
var rndWord = [];
var ul = document.getElementById("wordlist");

var i;
for (i = 0; i < ul.children.length; ++i) {

    listOfWords.push({
        "name": ul.children[i].getAttribute("data-word"),
        "pic": ul.children[i].getAttribute("data-pic"),
        "audio": ul.children[i].getAttribute("data-audio")
    });
}

var chosenWords = [];
var cpy_list = listOfWords.slice();

for (var x = 0; x < 6; x++) {
    var rand = Math.floor(Math.random() * (cpy_list.length));
    chosenWords.push(cpy_list[rand].name);
    cpy_list.splice(rand, 1);
    if (chosenWords.length < 12) {
        chosenWords.push('   ');
    }

}

var shuffledWords = [];
shuffledWords = chosenWords.sort(function() {
    return 0.5 - Math.random()
});

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

for (var i = 0; i < shuffledWords.length - 1; i += wordsPerRow) {

    var row = document.createElement('tr');
    for (var j = i; j < i + wordsPerRow; ++j) {
        var word = shuffledWords[j];
        guesses[word] = [];

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


            $(cell).addClass('drop-box').attr('data-word', word).attr('data-letter', word[k]);
            cell.textContent = word[k];

            row.appendChild(cell);
        }
    }
    tbl.appendChild(row);
}

document.body.appendChild(tbl);





$('#pickNext').click(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');

});



$('.drag').draggable({
    helper: 'clone',
    snap: '.drop',
    grid: [62, 62],
    revert: 'invalid',
    snapMode: 'corner',
   ...