javascript - 放下时制作可拖动的快照

Question

**编辑**

我目前正在创建一个拖放拼写游戏，用户将字母拖到突出显示的单词上以拼写它并显示后面的图像。

当一个单词以“.spellword”样式高亮显示时，它指示用户拼写该单词。当用户将一个字母拖到该区域时，他/她可以将该字母拖到 3 个字母空间中的任何位置，但我需要将它们从“左”拖到“右”以确保单词以正确的顺序拼写.

基本上，当一个字母落在单词上时，我需要它向左对齐(单词的第一个字母)，然后下一个字母落在单词的下一个字母上，等等...所以它被拼写为正确的顺序

我能做些什么来确保这一点？

draggable 和 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');
}

});

}

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

Answer 1

您可以将可排序的用户界面与可拖动的结合使用。然后 float:left as user1555320 suggested ... something like this:

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