Javascript 按类查找DOM中给定位置的元素
我试图创建一个拖放功能,当我拖动时,我需要找到相对于某个类的div的位置。问题是这个div与我正在拖动的元素重叠。为了解决这个问题,我有一个循环,我只需将每个元素的显示样式设置为none,然后再次使用elementFromPoint。比如说:Javascript 按类查找DOM中给定位置的元素,javascript,html,dom,draggable,Javascript,Html,Dom,Draggable,我试图创建一个拖放功能,当我拖动时,我需要找到相对于某个类的div的位置。问题是这个div与我正在拖动的元素重叠。为了解决这个问题,我有一个循环,我只需将每个元素的显示样式设置为none,然后再次使用elementFromPoint。比如说: e = document.elementFromPoint(x, y); while(!e.hasClass("abc")) { e.style.display = "none"; e = document.elementFromPoint
e = document.elementFromPoint(x, y);
while(!e.hasClass("abc")) {
e.style.display = "none";
e = document.elementFromPoint(x, y);
}
return e;
我面临的问题是,我认为当我将dom元素的显示样式设置为“无”时,窗口会向上移动。我想避免这种情况。还有别的办法吗
我正在尝试用普通javascript编写解决方案
谢谢 oslego的这篇文章显示了一个解决方案
//
// returns a list of all elements under the cursor
//
function elementsFromPoint(x,y) {
var elements = [], previousPointerEvents = [], current, i, d;
// get all elements via elementFromPoint, and remove them from hit-testing in order
while ((current = document.elementFromPoint(x,y)) && elements.indexOf(current)===-1 && current != null) {
// push the element and its current style
elements.push(current);
previousPointerEvents.push({
value: current.style.getPropertyValue('pointer-events'),
priority: current.style.getPropertyPriority('pointer-events')
});
// add "pointer-events: none", to get to the underlying element
current.style.setProperty('pointer-events', 'none', 'important');
}
// restore the previous pointer-events values
for(i = previousPointerEvents.length; d=previousPointerEvents[--i]; ) {
elements[i].style.setProperty('pointer-events', d.value?d.value:'', d.priority);
}
// return our results
return elements;
}
您可以修改该函数以完全执行所需操作,也可以在返回的数组中搜索与条件匹配的元素。好的,您可以尝试使用
e.style.visibility = 'hidden';
而不是
e.style.display = "none";
通过这种方式,图元将从视图中隐藏,但仍会占用布局中的空间。我想这对你很有用。Erm,
hasClass
是jQuery。对不起,我应该提到我使用的是Angular,因此在jqLite中我可以使用:)这也可以,但接受的解决方案更直接。但愿我能接受这两个!它要简单得多;如果我是你,我会接受这个答案:-)