Question

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

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

我正在尝试使用此代码来获取我的draggable正在尝试放入的元素（当前正在盘旋）。但是，这将始终返回我的draggable，而不是它下面的表格单元格（td）。

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

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

或者有更好的方法可以做到这一点吗？

Answer 1

由于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/*@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;
}

javascript - elementFromPoint选择底部元素

2 个答案: