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 回答