facendo scatto trascinabili sinistra in caso di caduta

Question

** EDIT * *

Attualmente sto creando un drag and drop gioco di ortografia in cui l'utente trascina le lettere sulla parola evidenziata per scriverlo e rivelare l'immagine dietro.

Quando una parola è evidenziata dallo stile ".spellword", indica all'utente di scrivere la parola. Quando l'utente va a trascinare una lettera in quell'area, può trascinare la lettera ovunque nello spazio di 3 lettere, ma ho bisogno che vengano trascinate da "sinistra" a "destra" per garantire che la parola sia scritta nell'ordine corretto .

Fondamentalmente quando una lettera viene rilasciata sulla parola, ho bisogno di farlo scattare a sinistra (prima lettera della parola) e poi la lettera successiva scatta scatta sulla lettera successiva della parola ecc ... quindi è scritta nell'ordine corretto

Cosa posso fare per garantire questo?

Lo script per il trascinabile e droppable è ...

$('.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'); 
} 

}); 

} 

HTML per draggables è ....

<div class="squares"> 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


    </div> 

Answer 1

Personalmente, non mi piace l'idea di utilizzare CSS per questo effetto. Perché non farlo come se la lettera fosse effettivamente caduta sul primo spazio aperto della parola?Questo sembra ottenere l'effetto desiderato:

http://jsfiddle.net/nickaknudson/sYJwm/

$('.drop').droppable({ 
... 
drop: function(event, ui) { 
    word = $(this).data('word'); 
    //change context from this to that 
    that = $('.spellword')[guesses[word].length]; 
    guesses[word].push($(ui.draggable).attr('data-letter')); 

    if ($(that).text() == $(ui.draggable).text().trim()) { 

     $(that).addClass('wordglow3'); 
    } else { 
     $(that).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); 
     } 
    } 
}, 
... 

Answer 2

non ho capito il tuo problema completamente, ma solo guardando il tuo questo codice sembra qualcosa che cambierei:

revert: function(droppable) { 
    return !droppable; 
}); 

Se si significa che devi accedere al primo elemento poi il secondo poi il terzo, ecc per poterlo fare con pseudo selectors

Answer 3

Penso che hai solo bisogno di un float: la proprietà di sinistra nel tuo css in modo che i div siano posizionati nella destra ordinare nel contenitore

Answer 4

è possibile utilizzare l'uI ordinabile in combinazione con trascinabile. poi float:left come user1555320 suggerito ... qualcosa di simile:

$('.drop').sortable({revert:true, axis:'x'}); 

$('.drag').draggable({ 
connectToSortable:'.drop', 
helper: 'clone', 
snap: '.drop', 
grid: [60, 60], 
revert: function(droppable) { 
    if (droppable === false) { 
     return true; 
    } 

    else { 

     return false; 
    } 
} 
}); 

allora il vostro css

.drop div { 
    float:left;   
} 

Answer 5

Si potrebbe provare a utilizzare float CSS per l'effetto aggancio sul DIV. Forse qualcosa come sotto.

#mainlist { 
    width: 20%; 
    float: left; 
    padding: 2px; 
} 

Answer 6

Le risposte da Anz & malificent sono entrambi buoni, ma facendo in modo che le lettere che vengono ordinati come "ultima in - posto come ultimo" e la posizione impostazione relativa sarebbe una soluzione migliore in quanto eviterebbe alcuni falliscono in CSS se si desidera applicare un ulteriore stile.

#mainlist { 
    width: 20%; 
    position: relative; 
    padding: 2px; 
    max-height: 65px; 
}