我一直在尝试为我们正在制作的 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 语句中的代码。
我错过/忽略了什么?
-弗迪