javascript - elementFromPoint seleziona elemento inferiore

Question

Sto lavorando su questa applicazione drag and drop con jquery/javascript e sto utilizzando un equilibrio tra i due per ottenere ciò che voglio.

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

quello che sto cercando di fare con questo codice qui è quello di ottenere l'elemento che la mia trascinabile sta cercando di essere caduto in (è attualmente in bilico su). Ciò, tuttavia, restituirà sempre la mia trascinabile, al contrario della cella della tabella (td) al di sotto di essa.

Poiché so che sto cercando un elemento td, c'è un modo per impostare var drop essere qualcosa di simile:

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

O c'è un modo migliore per fare questo?

Answer 1

Dal document.elementFromPoint restituisce l'elemento più in alto, è necessario impostare temporaneamente il trascinabili a display:none o pointer-events:none trovare elementi di sotto di essa. Ho creato un elenco di seguito che restituisce un elenco di tutti gli elementi in un determinato punto.

provare

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

o

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

poi

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

} 

Usando il succo di seguito: 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

mi basta usare event:

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

Non ho lavorato con il drag and drop molto, in modo che il selettore non funzionerà. Il e.target, però.

Answer 3

Se è possibile fare a meno dei browser più vecchi, il seguente CSS funzionerà:

Basta applicare questa regola al proprio elemento più in alto che viene trascinato.

#dragging { 
    pointer-events: none; 
}