1

http://lab.2toria.com/reflex/index2.phpで、私が構築しているゲームのアイデアに取り組み始めました。

右側のブロックをクリックしてメイン グリッドにドラッグすると、その上にドラッグすると、ブロックが強調表示されることがわかります。ドロップすると、ブロックに濃い灰色の境界線が表示されます。これは素晴らしいことですが、既に暗い灰色になっているセル/ブロックの上にブロックをドラッグすると、その上を通過するとデフォルトの明るい灰色にリセットされます。

これを止めるにはどうすればよいですか？濃い灰色のブロックはそのままにしておきたいです。

4

3 に答える 3

2

あなたhoverClassはpath、ドロップしたときにクラスとして設定しているものでもあるドロップ可能です。ドラッグ可能でそのドロップ可能に入って終了すると、クラスが削除されます。同じスタイリング ルールで 2 つの別個のクラスを作成し、一方を として使用しhoverClass、もう一方をドロップされたクラスとして使用しないでください。

$(".grid").droppable({
    hoverClass: "hovered",
    drop: function(event,ui) {
        $(this).addClass("path");
    }
});
于 2013-04-23T18:47:02.063 に答える
1

少し冗長かもしれませんが、ホバー クラスと、ブロックをドロップしたときに適用されるクラスを別々のクラスにすることができます。

だからあなたは持っているでしょう

.path {
    border: 2px solid Gray;
}
.dropped {
    border: 2px solid Gray;
}

そして、あなたのドロップ可能な機能は

$(".grid").droppable({
    hoverClass: "path",
    drop: function(event,ui) {
        $(this).addClass("dropped");
    }
});

http://jsfiddle.net/aymhZ/

于 2013-04-23T18:47:20.167 に答える
1

hoverはクラスと同じであるため、クラスを置き換えますdrop。要素にあるときmouseoverはクラスを追加し、あるときはそれをmouseout削除します。別のクラスを使用してください。

$(document).ready(function() {
    //$(".grid").click(function() {
    //     $(this).addClass("path");
    //})
    $("#pathpiece").draggable({
        revert: true,
        revertDuration: 1,
        helper: "clone"
    });

    $(".grid").droppable({
        // Create a hoverPath class
        hoverClass: "hoverPath",
        drop: function(event,ui) {
        $(this).addClass("path");
        }
    });
});
于 2013-04-23T18:45:54.810 に答える