Question

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

我们需要能够拖动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来设置“draggable”类的所有东西，以便能够被拖动。正文获取mousemove事件以存储当前鼠标位置。虽然所有带有“锁定”类的元素都会触发一个mousedown事件。在这种情况下，我通过添加一个名为“hide”的类（它只包含一个display：none）来隐藏我点击的元素。

此时，单击元素下方的元素可见。使用elementFromPoint结合我存储的鼠标位置，我抓住了下面的元素。

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

然后我再次删除“hide”类，以便元素不会保持隐藏状态。

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

在我看来，这应该没有任何问题。我的意思是，它只使用1个重叠div，即使有2个（或更多），我仍然在else if语句中触发代码。

我缺少什么/忽视？

-Ferdy

Answer 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/

从多个其他div下面拖出一个div

1 个答案: