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

你可以将可排序的ui与draggable一起使用。那么float:left就像用户1555320建议的那样......：

$('.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＆amp;的回答非常好，但要确保排序为“最后一个就地作为最后一个”并将位置设置为相对的字母将是一个更好的解决方案，因为如果你想进一步应用它将避免CSS中的一些陷阱样式。

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

Answer 3

您可以尝试使用CSS float来捕捉DIV上的捕捉效果。也许就像下面的东西。

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

Answer 4

就个人而言，我不喜欢使用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 5

我认为你只需要在你的css中使用float：left属性，以便div在容器中以正确的顺序显示

Answer 6

我完全不明白你的问题，只是看看你的代码，这似乎是我要改变的东西：

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

如果你的意思是你需要访问第一个元素，然后是第二个元素，然后是第三个元素，等等，你可以用pseudo selectors

来访问

掉落时留下可拖动的按扣

6 个答案: