3

我一直在尝试为我们正在制作的 web 应用程序创建一个测试用例,并且我非常接近解决方案,但最后一部分让我很难过......

我们需要能够拖动 div(那里没问题),但是一些 div 需要锁定到位(同样,没问题)。

当可拖动的 div 卡在不可拖动的 div 下方时,就会出现问题。我已经对此进行了一些修复,但只有在可拖动的 div 顶部只有一个不可拖动的 div 时才有效。它与另一个不可拖动的 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 将所有内容设置为“可拖动”类,以便能够拖动。body 获得一个 mousemove 事件来存储当前的鼠标位置。虽然所有具有“锁定”类的元素都会触发 mousedown 事件。在这种情况下,我通过添加一个名为“hide”的类(仅包含一个显示:无)来隐藏我单击的元素。

此时,被点击元素下方的元素是可见的。使用 elementFromPoint 结合我存储的鼠标位置,我抓住了下部元素。

然后检查它是“锁定”还是“可拖动”,我可以确定这个元素应该做什么。如果它被锁定,我会强制它执行 mousedown 事件。如果它是可拖动的,我使用 .trigger(e) 开始拖动。

然后我再次删除“隐藏”类,这样元素就不会保持隐藏状态。

使用名为 data 的 div,我可以看到该函数确实到达了可拖动的 div。但是,如果两个锁定的 div 都在它上面,它就不会开始拖动。如果顶部只有一个锁定的 div,我可以开始拖动可拖动的 div。

在我看来,这应该没有任何问题。我的意思是,它只适用于 1 个重叠 div,即使有 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 回答