从多个其他 div 下方拖出一个 div答案

【问题标题】：Dragging a div out from underneath multiple other divs从多个其他 div 下方拖出一个 div
【发布时间】：2013-06-14 17:49:12
【问题描述】：

我一直在尝试为我们正在制作的 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 语句中的代码。

我错过/忽略了什么？

-弗迪

【问题讨论】：

$('.locked').ready(function ()，你意识到只有在 dom 完全加载时才会触发，并且不会将 mousedown 函数应用于未来创建的.locked，对吧？如果您希望它应用于任何元素.locked，即动态，请删除该包装函数，将 mousedown 函数放入准备好的文档中并将第一行更改为$(document).on("mousedown", ".locked", function(e) {
如果我这样做（或至少按照我认为你的意思去做）我会收到一个错误，说递归过多并且脚本停止工作。

标签： javascript jquery jquery-ui jquery-ui-draggable

【解决方案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/

【讨论】：

好吧，我不知道为什么，但它确实完美！非常感谢！星期一会很有趣，因为我可以向我的同事证明这是可以做到的；）