3

私たちが作成している Web アプリケーションのテスト ケースを作成しようとしていて、解決策にかなり近づいていますが、最後の部分で困惑しています...

div をドラッグできるようにする必要があります (問題ありません) が、一部の div は所定の位置に固定する必要があります (これも問題ありません)。

この問題は、ドラッグ可能な div がドラッグ不可能な div の下にスタックしている場合に発生します。私はこれをいくらか修正しましたが、ドラッグ可能な div の上にドラッグできない div が 1 つしかない場合にのみ機能します。別のドラッグできない div と重なった瞬間、機能しません。ドラッグ可能な div に正しくアクセスしているので、これは奇妙です。

私のHTML：

<body>

<div id="div1" class="draggable"></div>
<div id="div2" class="locked"></div>
<div id="div3" class="locked"></div>

</body>

そして、ここに私のjavascriptがあります:

<script>

         $(document).ready(function () {
             $(document).mousemove(function (e) {
                 window.mouseXPos = e.pageX;
                 window.mouseYPos = e.pageY;
             });
         });

        $(function () {
            $(".draggable").draggable();
        });

        $('.locked').ready(function () {
            $('.locked').mousedown(function (e) {
                var layer = e.target; 
                $("#data").html($("#data").html() + " " + layer.id);
                $(layer).addClass("hide");
                var lowerLayer = document.elementFromPoint(window.mouseXPos, window.mouseYPos);

                if ($(lowerLayer).hasClass("locked")) {
                    $(lowerLayer).mousedown();
                }

                else if ($(lowerLayer).hasClass("draggable")) {
                    $("#data").html($("#data").html() + " " + lowerLayer.id);
                    $(lowerLayer).trigger(e);
                }

                $(layer).removeClass("hide");
            });
        });


    </script>

さて、アイデアはこれです。jqueryを使用して、ドラッグできるように「ドラッグ可能」クラスですべてを設定します。本体は、現在のマウス位置を格納するために mousemove イベントを取得します。「ロックされた」クラスを持つすべての要素は、マウスダウンイベントを発生させます。このイベントでは、"hide" というクラス (display: none のみを含む) を追加して、クリックしている要素を非表示にします。

この時点で、クリックした要素の下にある要素が表示されます。保存したマウス位置と elementFromPoint を組み合わせて使用​​して、下の要素を取得します。

次に、「ロック」または「ドラッグ可能」かどうかを確認することで、この要素が何をすべきかを判断できます。ロックされている場合は、強制的に mousedown イベントを実行します。ドラッグ可能な場合は、.trigger(e) を使用してドラッグを開始します。

次に、要素が非表示にならないように、「非表示」クラスを再度削除します。

data という div を使用すると、関数が実際にドラッグ可能な div に到達していることがわかります。ただし、両方のロックされた div がその上にある場合、ドラッグは開始されません。上部にロックされた div が 1 つしかない場合は、ドラッグ可能な div のドラッグを開始できます。

私の意見では、これは問題なく動作するはずです。つまり、重複する div が 1 つだけで機能し、2 つ (またはそれ以上) の場合でも、else if ステートメントでコードをトリガーしています。

何が欠けている/見落としていますか?

-フェルディ

4

1 に答える 1

1

私はあなたのスクリプトを少し違った方法で書き直しましたが、うまくいくようです。問題は、e.target を使用している可能性がありますが、よくわかりません。これが私がしたことです：

$(".draggable").draggable();

$(".locked").mousedown(function(e) {
    var layer = $(this);
    layer.addClass("hide");

    var lowerLayer = $(document.elementFromPoint(e.pageX, e.pageY));

    if (lowerLayer.hasClass("draggable") || lowerLayer.hasClass("locked"))
        lowerLayer.trigger(e);

    layer.removeClass("hide");
});

http://jsfiddle.net/AXycq/

于 2013-06-14T18:56:01.970 に答える