zu machen ziehbar Snap links, wenn

Question

fiel

** EDIT * *

ich zur Zeit eine Drag Erstellen und Rechtschreibung Spiel fallen, wo der Benutzer Buchstaben auf das markierte Wort, um schleppt es zu buchstabieren und offenbaren das Bild dahinter.

Wenn ein Wort durch den Stil ".spellword" hervorgehoben wird, zeigt es dem Benutzer an, dieses Wort zu buchstabieren. Wenn der Benutzer einen Buchstaben in diesen Bereich zieht, kann er den Buchstaben irgendwo in den 3-Buchstaben-Raum ziehen, aber ich muss ihn von "links" nach "rechts" fallen lassen, um sicherzustellen, dass das Wort in der richtigen Reihenfolge geschrieben wird .

Grundsätzlich, wenn ein Brief auf das Wort fallen gelassen wird, muss ich es nach links (erster Buchstabe des Wortes) schnappen und dann den nächsten Buchstaben fallen schnappt auf den nächsten Buchstaben des Wortes etc ... so wird es buchstabiert in der richtigen Reihenfolge

Was kann ich tun, um dies zu gewährleisten?

Das Skript für die ziehbar und abwerfbaren ist ...

$('.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 für draggables ist ....

<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

Persönlich mag ich nicht die Idee, CSS für diesen Effekt zu verwenden. Warum nicht so tun, als ob der Brief tatsächlich auf die erste freie Stelle des Wortes gefallen wäre?Dies scheint die gewünschte Wirkung zu erzielen:

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

ich Ihr Problem nicht in vollem Umfang verstehen, sondern einfach nur auf Ihre Code dies scheint wie etwas, das ich ändern würde:

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

Wenn Sie bedeutet, dass Sie auf das erste Element zugreifen müssen, dann die zweite, dann die dritte, usw., um dies mit

Answer 3

zu tun Ich denke, dass Sie nur eine Float benötigen: linke Eigenschaft in Ihrem CSS, so dass divs in der rechten pòaced sind Bestellung im Container

Answer 4

Sie können die sortierbare UI in Verbindung mit ziehbaren verwenden. dann float:left als user1555320 vorgeschlagen ... etwas wie folgt aus:

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

dann css

.drop div { 
    float:left;   
} 

Answer 5

Sie könnten CSS Schwimmer für die schnapp Wirkung auf den DIV versuchen Sie es mit. Etwas wie unten vielleicht.

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

Answer 6

Die Antworten vom ANZ-& Malificent sind beide gut, aber darauf achten, dass die Buchstaben, die als „letzte in - Platz zuletzt“ sortiert und Einstellung Position relativ um eine bessere Lösung wäre, da es vermeiden würde ein paar Fall Pits in CSS sollten Sie weitere Styling anwenden möchten.

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