使左拖動卡時下降

我目前正在創建一個拖放，其中用戶爲了拖動字母到高亮顯示的單詞拼寫，並揭示下降拼字遊戲背後的形象。

當一個單詞被樣式「.spellword」突出顯示時，它指示用戶拼寫該單詞。當用戶將字母拖入該區域時，他/她可以在3個字母空間中的任意位置拖動字母，但我需要將它們從「左」拖放到「右」以確保單詞拼寫正確順序。

基本上，當一個字母被放到單詞上時，我需要將它對齊到左邊（單詞的第一個字母），然後下一個字母被放到單詞的下一個字母上，所以它被拼寫按正確順序排列

我該怎麼做才能確保這一點？

腳本可拖動和投擲的是...

$('.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的拖拽元素是....

<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>

來源

2012-07-27 m0onio

你可以添加關於該問題的HTML提取物？ – 2012-07-30 15:22:37

@EH_warch編輯上面 – m0onio 2012-07-30 15:24:38

就我個人而言，我不喜歡使用CSS來達到這個效果。爲什麼不把它看作是這封信實際上落在了這個詞的第一個空白處呢？這似乎達到預期的效果：

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); 
     } 
    } 
}, 
...

來源

2012-08-14 00:19:38 nickaknudson

-1

我沒有完全理解你的問題，但只是看你的代碼這似乎是我會改變的東西：

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

如果你意味着你需要訪問第一個元素，然後第二個然後第三個等，以便你可以做到這一點pseudo selectors

來源

2012-07-28 19:18:16 ricardoespsanto

基本上，當一個字母被放到單詞上時，它會對齊到左邊（單詞的第一個字母），然後下一個字母被放到單詞的下一個字母上，所以它被拼寫成正確的訂單@Ricky – m0onio 2012-07-30 08:56:16

我認爲你只需要在你的CSS的float：left屬性，以便divs在右邊在容器中訂購

來源

2012-07-31 12:26:58 user1555320

您可以將可排序的UI與可拖動結合使用。然後float:left爲user1555320建議......是這樣的：

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

然後你的CSS

.drop div { 
    float:left;   
}

來源

2012-08-01 16:36:26 malificent

你可以嘗試使用CSS的float有關DIV的捕捉效果。或許像下面的東西。

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

來源

2012-08-06 07:11:44 Anz

我在@Anz上面加了一個小提琴 – m0onio 2012-08-07 08:00:52

從ANZ & malificent的答案都是很好的，但是確保被整理爲「最後一個 - 地方作爲最後的」字母和設置位置相對會是一個更好的解決方案，因爲它會避免如果您想要應用更多樣式，可以在CSS中使用幾個秋天的小坑。

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

來源

2012-08-06 08:09:52 miracules

我在@miracules上面加了一個小提琴 – m0onio 2012-08-07 08:01:27

使左拖動卡時下降

回答

相關問題