1

私はある種のグリッド マップ エディターを作成しています。これは、今までに学習するための実験であり、いくつかの問題に遭遇しました。

状況：

  • 黒い背景を持つ 10px x 10px の div の 20x20 グリッドがあり、すべてドロップ可能です。
  • そのグリッドの外側に 2 つの div があります。1 つは灰色で、もう 1 つは緑色で、ドラッグ可能で、クローンを作成したいときにグリッドを塗りつぶします。

これら2つの特別なdivの1つをドラッグしてドロップ可能なグリッドdivにドロップすると、「drop1」と呼びましょう。このdrop1は、必要な色、たとえば緑に変わりますが、元の緑はドラッグできなくなるため、使用できません別のドロップ可能な div を「埋める」。

これは私のJSです：

$(function() {
    $( ".draggable" ).draggable({
        revert: "invalid" ,
        helper: function(){
            $copy = $(this).clone();
            return $copy;},
        appendTo: 'body',
        scroll: false
    });
    $( ".droppable" ).droppable({
        hoverClass: "droppableHover",
        drop: function( event, ui ) {
            $( this )
                .removeClass( "droppable" )
                .addClass( function(){
                    if ($ui.hasClass('graycell'))
                        return 'graycell';
                    else return 'greencell';
                })
                .addClass( "draggable" )
        }
    });
});

これは HTML の一部です。

                    <div class="graycell draggable" id="gray"></div>
                    <div class="greencell draggable" id="green"></div> 

<div title="(0,0)" class="cellborder droppable" id="0_0"></div>
<div title="(0,1)" class="cellborder droppable" id="0_1"></div>
<div title="(0,2)" class="cellborder droppable" id="0_2"></div>
<div title="(0,3)" class="cellborder droppable" id="0_3"></div>
<div title="(0,4)" class="cellborder droppable" id="0_4"></div>
<div title="(0,16)" class="cellborder droppable" id="0_16"></div>

私は自分自身を十分に説明したかどうかわからないので、申し訳ありませんが、必要に応じて説明を求めてください.

編集：

ドロップ可能な要素の .addClass() メソッドで関数を使用しない場合 (.addClass('gray') を直接使用する場合など)、これは希望どおりに機能することがわかりましたが、関数を追加すると (上記のコードのように) 2 つのクラスから選択するには、実際には div を「複製」していないように機能しません。

4

0 に答える 0