Javascript 从多个其他div下面拖动div_Javascript_Jquery_Jquery Ui_Jquery Ui Draggable

Javascript 从多个其他div下面拖动div

javascript jquery jquery-ui

Javascript 从多个其他div下面拖动div,javascript,jquery,jquery-ui,jquery-ui-draggable,Javascript,Jquery,Jquery Ui,Jquery Ui Draggable,我一直在尝试为我们正在制作的一个Web应用程序创建一个测试用例，我非常接近一个解决方案，但最后一部分让我感到困惑我们需要能够拖动div（这里没有问题），但是一些div需要锁定到位（同样，没有问题）当一个可拖动的div卡在一个不可拖动的div下面时，问题就出现了。我已经对此进行了一定程度的修复，但它只在可拖动的div上面只有一个不可拖动的div时才起作用。当它与另一个不可拖动的div重叠时，它就不起作用了。这很奇怪，因为我正确地访问了draggable div 我的HTML： <body

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

我们需要能够拖动div（这里没有问题），但是一些div需要锁定到位（同样，没有问题）

当一个可拖动的div卡在一个不可拖动的div下面时，问题就出现了。我已经对此进行了一定程度的修复，但它只在可拖动的div上面只有一个不可拖动的div时才起作用。当它与另一个不可拖动的div重叠时，它就不起作用了。这很奇怪，因为我正确地访问了draggable div

我的HTML：

<body>

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

下面是我的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>


$（文档）.ready（函数（）{
$（文档）.mousemove（函数（e）{
window.mouseXPos=e.pageX；
window.mouseYPos=e.pageY；
});
});
$（函数（）{
$（“.draggable”）.draggable（）；
});
$（'.locked'）.ready（函数（）{
$（'.locked'）.mousedown（函数（e）{
var层=e.目标；
$（“#数据”）.html（$（“#数据”）.html（）+“”+layer.id）；
$（图层）.addClass（“隐藏”）；
var lowerLayer=document.elementFromPoint（window.mouseXPos，window.mouseYPos）；
if（$（lowerLayer）.hasClass（“锁定”））{
$（lowerLayer.mousedown（）；
}
else if（$（lowerLayer）.hasClass（“可拖动”））{
$（“#数据”）.html（$（“#数据”）.html（）+“”+lowerLayer.id）；
$（下层）。触发器（e）；
}
$（层）.removeClass（“隐藏”）；
});
});

好的，我的想法是，我使用jquery将类“draggable”的所有内容都设置为可以拖动。主体获取一个mousemove事件来存储当前鼠标位置。而所有具有“locked”类的元素将触发mousedown事件。在这个事件中，我通过添加一个名为“hide”的类（只包含一个display:none）来隐藏我正在单击的元素

此时，单击的元素下面的元素可见。使用elementFromPoint并结合存储的鼠标位置，我抓取较低的元素

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

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

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

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

我错过了什么/忽略了什么

-Ferdy

我改写了你的脚本，稍微有点不同，它似乎很管用。问题可能是您正在使用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");
});

代码>美元（'.locked'）.ready（函数（），您意识到只有当dom完全加载时才会触发，并且不会将mousedown func应用于将来创建的

。锁定的

，对吗？如果您想将其应用于任何元素

。锁定的

，换句话说，动态的，移除包装器func，将mousedown func放在doc ready中，并将第一行更改为

$（文档）。打开（“mousedown”，“.locked”，函数（e）{

如果我这样做（或者至少按照我认为你的意思做），我会收到一个错误，说递归太多，脚本停止工作。我不知道为什么，但它确实工作得很好！非常感谢！当我能向同事证明这是可以做到的时候，周一会非常有趣；）

$(".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");
});