javascript – elementFromPoint选择底部元素

我正在使用jquery / javascript处理这个拖放应用程序，我必须使用两者的平衡来完成我想要的。

var drop = document.elementFromPoint($(this).offset().left, $(this).offset().top);

我在这里尝试使用这个代码来获取我的draggable试图被丢弃的元素（目前正在盘旋）。 但是，这将始终返回我的draggable，而不是它下面的table cell（ td ）。

因为我知道我正在寻找一个td元素，有没有办法将var drop设置为：

var drop = document.elementFromPoint(x, y, 'td') ？

或者有更好的方法来做这件事吗？

Answer 1

由于document.elementFromPoint返回最顶层的元素，因此您需要暂时将draggable设置为display:none或pointer-events:none以查找其下方的元素。 我在下面创建了一个要点，它返回给定点上所有元素的列表。

尝试

 var elementsArray = KoreSampl.atPoint(x,y,yourTableElement); 

要么

 var elementsArray = KoreSampl.fromEvent(dropEvent, yourTableElement); 

然后

 for(var i=0; i 

使用下面的要点： https ： //gist.github.com/2166393

 ;(function(){ //test for ie: turn on conditional comments var jscript/*@cc_on=@_jscript_version@*/; var styleProp = (jscript) ? "display" : "pointerEvents"; var KoreSampl = function() {}; KoreSampl.prototype.fromEvent = function(e, lastElement) { e = e || window.event; //IE for window.event return this.atPoint(e.clientX, e.clientY, lastElement); }; KoreSampl.prototype.atPoint = function(clientX, clientY, lastElement) { //support for child iframes var d = (lastElement) ? lastElement.ownerDocument : document; //the last element in the list lastElement = lastElement || d.getElementsByTagName("html")[0]; var element = d.elementFromPoint(clientX, clientY); if(element === lastElement || element.nodeName === "HTML") { return [element]; } else { var style= element.style[styleProp]; element.style[styleProp]="none"; //let us peak at the next layer var result = [element].concat(this.atPoint(clientX,clientY,lastElement)); element.style[styleProp]= style; //restore return result; } }; window["KoreSampl"] = new KoreSampl(); })(); 

Answer 2

如果您可以省去旧浏览器，以下CSS将起作用：

只需将此规则应用于您正在拖动的最顶层元素即可。

 #dragging { pointer-events: none; }