podejmowania przeciągany przystawki w lewo, gdy spadła

Question

** EDIT * *

Jestem obecnie tworzenie przeciągnij i upuść gry pisowni gdzie użytkownik przeciąga litery na podświetlonym słowem, aby przeliterować i ujawnić obraz z tyłu.

Gdy słowo jest podświetlone przez styl ".spellword", oznacza to, że użytkownik może przeliterować to słowo. Kiedy użytkownik przeciągnie literę do tego obszaru, może przeciągnąć literę w dowolne miejsce w przestrzeni 3-literowej, ale muszę je usunąć z "lewej" do "prawej", aby upewnić się, że słowo jest napisane we właściwej kolejności .

Zasadniczo po upuszczeniu litery na słowo potrzebuję jej do przyciągnięcia w lewo (pierwsza litera słowa), a następna litera upuściła zatrzaski na następną literę słowa itp. ... więc jest pisana we właściwej kolejności

Co mogę zrobić, aby to zapewnić?

Skrypt dla przeciągać i droppable jest ...

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

<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

Osobiście nie podoba mi się pomysł użycia CSS do tego efektu. Dlaczego nie zrobić tak, jakby list został rzeczywiście upuszczony na pierwszej otwartej przestrzeni tego słowa?Wydaje się to osiągnąć pożądany efekt:

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

I nie rozumiem problemu całkowicie, ale tylko patrząc na kod wydaje się być czymś, co chciałbym zmienić:

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

Jeśli oznacza, że ​​musisz uzyskać dostęp do pierwszego elementu, a następnie drugi, trzeci itd., abyś mógł to zrobić z pseudo selectors

Answer 3

Myślę, że potrzebujesz tylko float: pozostawiono właściwość w twoim css tak, aby divy były umieszczone w prawej zamówienie w kontenerze

Answer 4

możesz używać sortowalnego ui w połączeniu z przeciąganiem. następnie float:left ... jak user1555320 zasugerował coś takiego:

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

wówczas css

.drop div { 
    float:left;   
} 

Answer 5

Można spróbować użyć CSS pływaka za efekt zatrzaskiwania na DIV. Może coś poniżej.

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

Answer 6

Odpowiedzi z Anz & malificent są zarówno dobre, jednak upewniając się, że litery, które są klasyfikowane jako „ostatni w - miejsce jako ostatni” i ustawienie pozycji względnej byłoby lepszym rozwiązaniem, jak to uniknąć kilka upadków w CSS, jeśli chcesz zastosować dalszą stylizację.

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