8

**編集**

私は現在、ドラッグアンドドロップのスペルゲームを作成しています。このゲームでは、ユーザーが強調表示された単語に文字をドラッグして、スペルを入力し、背後の画像を表示します。

単語がスタイル「.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>
4

6 に答える 6

2

ソート可能な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-01T16:36:26.387 に答える
2

Anzとmalificentからの回答はどちらも良いですが、「最後の1つ-最後の場所」として並べ替えられた文字を確認し、相対的な位置を設定することで、CSSのいくつかのフォールピットを回避できるため、より良い解決策になります。さらにスタイリングを適用したい。

#mainlist {
    width: 20%;
    position: relative;
    padding: 2px;
    max-height: 65px;
}
于 2012-08-06T08:09:52.437 に答える
1

DIVのスナップ効果にCSSフロートを使用してみることができます。おそらく以下のようなもの。

#mainlist {
    width: 20%;
    float: left;
    padding: 2px;
}
于 2012-08-06T07:11:44.393 に答える
1

個人的には、この効果に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-14T00:19:38.830 に答える
0

divがコンテナ内で正しい順序で配置されるように、cssにfloat：leftプロパティが必要だと思います

于 2012-07-31T12:26:58.857 に答える
-1

私はあなたの問題を完全には理解していませんでしたが、あなたのコードを見るだけで、これは私が変更するもののようです：

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

疑似セレクターでこれを行うには、最初の要素、次に2番目、次に3番目などにアクセスする必要がある場合。

于 2012-07-28T19:18:16.123 に答える