haciendo presión pueda arrastrar a la izquierda cuando se deja caer

Question

** * EDITAR *

actualmente estoy creando un arrastrarlo juego de ortografía en el que el usuario arrastra letras en la palabra resaltada con el fin de explicar y revelar la imagen detrás

Cuando una palabra se resalta con el estilo ".spellword", indica al usuario que deletree esa palabra. Cuando el usuario va a arrastrar una letra a esa área, puede arrastrar la letra a cualquier parte del espacio de 3 letras, pero necesito que se suelte de "izquierda" a "derecha" para garantizar que la palabra se deletree en el orden correcto .

Básicamente, cuando se suelta una letra en la palabra, necesito que encaje a la izquierda (primera letra de la palabra) y luego la siguiente letra que se cae se ajusta a la siguiente letra de la palabra, etc. ... por lo que se deletrea en el orden correcto

¿Qué puedo hacer para asegurar esto?

El guión de la pueden arrastrar y soltar es ...

$('.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 para draggables es ....

<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, no me gusta la idea de usar CSS para este efecto. ¿Por qué no hacer que parezca que la carta se dejó caer en el primer espacio abierto de la palabra?Esto parece lograr el efecto deseado:

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

no entendía su problema completamente, sino sólo mirar a su código esto parece algo que cambiaría:

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

Si significa que necesita acceder al primer elemento, luego al segundo, luego al tercero, etc. para que pueda hacer esto con pseudo selectors

Answer 3

Creo que solo necesita un flotador: dejar la propiedad en su CSS de modo que los divs se coloquen en la derecha orden en el contenedor

Answer 4

puede usar el ordenable ui junto con el arrastrable. entonces float:left como user1555320 sugirió ... algo como esto:

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

entonces su css

.drop div { 
    float:left;   
} 

Answer 5

Usted podría tratar de usar CSS float para el efecto de rotura en el DIV. Algo como debajo quizás.

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

Answer 6

Las respuestas de Anz & Malificent son buenos, sin embargo, asegurándose de que las cartas que se ordenan como "último en - lugar en último" y posición de ajuste al respecto sería una mejor solución, ya que evitaría algunas caídas en CSS si desea aplicar más estilo.

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