放下时使可拖动的对齐方式向左

Question

**编辑**

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

当一个单词以“.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>

Answer 1

您可以将 sortable ui 与 draggable 结合使用。然后 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;           
}

Answer 2

Anz 和 malificent 的答案都很好，但是确保将字母排序为“最后一个原位”并将位置设置为相对将是一个更好的解决方案，因为它可以避免一些跌落坑如果您想在 CSS 中应用更多样式。

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

Answer 3

就我个人而言，我不喜欢使用 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);
        }
    }
},
...

Answer 4

您可以尝试使用 CSS 浮动来实现 DIV 上的捕捉效果。可能像下面这样。

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

Answer 5

我认为你只需要在你的 CSS 中添加一个 float:left 属性，以便 div 在容器中以正确的顺序排列

Answer 6

我没有完全理解你的问题，但只是看看你的代码，这似乎是我会改变的：

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

如果您的意思是您需要访问第一个元素，然后是第二个元素，然后是第三个元素，依此类推，您可以使用 pseudo selectors 执行此操作