javascript-elementFromPoint выбрать нижний элемент

Я работаю над этим приложением перетаскивания с jquery/javascript, и мне нужно использовать баланс из двух, чтобы выполнить то, что я хочу.

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

то, что я пытаюсь сделать с этим кодом, - это получить элемент, который мой перетаскиваемый пытается сбросить (в настоящее время зависает). Это, однако, всегда будет возвращать мой перетаскиваемый, в отличие от ячейки таблицы (td) под ним.

так как я знаю, что ищу td элемент, есть ли способ установить var drop будет что-то вроде:

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

или есть лучший способ сделать это?

9
javascript jquery jquery-ui

2 ответов

С document.elementFromPoint возвращает самый верхний элемент, вам нужно будет временно установить перетаскиваемый в display:none или pointer-events:none найти элементы под ним. Я создал gist ниже, который возвращает список всех элементов в данной точке.

попробовать 

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();
})();
16

Если вы можете обойтись без старых браузеров, будет работать следующий CSS:

просто примените это правило к вашему самому верхнему элементу, который перетаскивается.

#dragging {
  pointer-events: none;
}
5