javascript-elementFromPoint select bottom element

我正在使用jquery/javascript来拖放应用程序，我不得不使用两者的平衡来完成我想要的功能。javascript-elementFromPoint select bottom element

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

我想要在这里这段代码做的是让我的拖动试图在（当前悬停）要删除的元素。但是，这将始终返回我的可拖动，而不是它下面的表格单元格（td）。

因为我知道我要寻找一个td元素，有没有一种方法来设置var drop是这样的：

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

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

2012-01-10 Jordan Foreman

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

尝试

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

或

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

然后

for(var i=0; i<elementsArray.length; i++) { 
    //loop through elementsArray until you find the td you're interested in 

}

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

;(function(){ 
    //test for ie: turn on conditional comments 
    var jscript/*@[email protected][email protected]*/; 
    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(); 
})();

来源

2012-03-23 06:14:47

我能够用z-index切换而不是样式切换来做同样的事情。 – matt 2014-03-29 00:00:32

我只是用event：

$('#foo').on('drop', function(e) { 
    var drop = e.target; 
});

我还没有和拖工作，下降多少，因此选择将无法正常工作。但是，e.target会。

来源

2012-01-10 21:04:02 Blender

是啊...但不幸的是，因为我不使用jQuery拖动一些元素，也并不一定是'target'我使用 – 2012-01-10 21:06:16

'e.target'不是jQuery特有的属性。大多数事件都有目标。 – Blender 2012-01-10 23:13:03

如果您可以免除旧版浏览器，那么以下CSS将可以使用：

只需将此规则应用到您拖到最顶端的元素即可。

#dragging { 
    pointer-events: none; 
}

来源

2014-10-08 18:20:40 user1031947

这是一个很好的解决方案;应该有更多的赞誉。 – mz3 2015-02-17 22:35:42

javascript-elementFromPoint select bottom element

回答

相关问题