Ottenere ID DIV in base alla posizione x & 01

Question

Il problema che sto cercando di risolvere è "Cosa c'è in questa posizione?"

È piuttosto banale ottenere la posizione x/y (offset) di un DIV, ma che dire del contrario? Come ottengo l'id di un DIV (o qualsiasi elemento) data una posizione x/y?

Answer 1

Utilizzare un selettore JQuery per filtrare l'elenco di tutti i DIV per uno che corrisponde ai criteri di posizione?

Answer 2

Il selettore di JQuery è piuttosto utile, ma (a meno che non mi sia sfuggito qualcosa nei documenti) non ci sono selettori in grado di farlo. Non riesco a filtrare in base a nessun altro criterio perché tutto ciò di cui devo occuparmi è una posizione xey.

Answer 3

Creare un listener di eventi del mouse, quindi attivare un evento del mouse in quella posizione. Questo dovrebbe darti l'intera pila di elementi in quella posizione.

Oppure, guarda la fonte di Firebug.

Answer 4

questo potrebbe essere un po 'troppo intenso per il processore, ma va oltre l'intera lista di elementi div in una pagina, trovando le loro posizioni e dimensioni, quindi testare se sono sotto il mouse. non penso che vorrei farlo a un browser però.

Answer 5

Grazie MattMitchell. Vorrei che fosse così semplice - so già come ottenere la posizione di un DIV - questo è un po 'più complicato.

Nick e John - Sfortunatamente, non posso usare la posizione del mouse.

Penso che la soluzione implichi la creazione di una logica che prende posizione, esegue alcuni calcoli e restituisce l'ID DIV. Sembra che non ci sia una risposta facile.

Answer 6

Un'opzione è creare un array di oggetti "div-dimension". (Da non confondere con gli stessi div ... IE7 perf è frustrante quando si leggono le dimensioni fuori dell'oggetto.)

Questi oggetti consistono in un puntatore al div, le loro dimensioni (quattro punti ... diciamo in alto, a sinistra, in basso ea destra), e possibilmente un po 'sporco. (Il bit sporco è davvero necessario solo se le dimensioni cambiano.

Si può quindi scorrere l'array e controllare le dimensioni. È necessario O (n) farlo su ogni spostamento del mouse. Potresti riuscire a fare leggermente meglio con un approccio di stile di ricerca binario ... forse

Se si utilizza un approccio di ricerca binaria, un modo è di memorizzare 4 matrici, ognuna con un singolo punto della dimensione e quindi una ricerca binaria su tutti e quattro. 4logn) = O (log n).

non sto dicendo che vi consiglio uno di questi, ma potrebbe funzionare.

Answer 7

Se hai a disposizione solo la X e Y p osition, (e non puoi tenere traccia del movimento del mouse come hai detto tu) allora dovrai attraversare il DOM, scorrendo attraverso ogni DIV. Per ogni DIV dovrai confrontare le sue coordinate X e Y con quelle che hai. Questa è un'operazione costosa, ma è l'unico modo. Ti suggerisco di stare meglio a ripensare il tuo problema invece di trovare una soluzione per questo.

Answer 8

È possibile che sia più efficiente attraversare l'albero DOM una volta caricata la pagina, ottenere le posizioni e le dimensioni di tutti gli elementi e archiviarli in un array/hash/ecc. Se progettate bene la struttura dati, dovreste essere in grado di trovare un elemento alle coordinate date abbastanza rapidamente quando ne avrete bisogno in seguito.

Considerare la frequenza con cui è necessario rilevare un elemento e confrontarlo con la frequenza con cui cambieranno gli elementi nella pagina. Dovresti bilanciare il numero di volte in cui devi ricalcolare tutte le posizioni degli elementi (un calcolo costoso) rispetto al numero di volte in cui utilizzeresti effettivamente le informazioni calcolate (spero che sia relativamente economico).

Answer 9

Penso che John stia dicendo che è possibile utilizzare document.createEvent() per simulare un mousemove nel punto desiderato. Se si cattura quell'evento, aggiungendo un listener di eventi al corpo, è possibile esaminare event.target e vedere quale elemento era in quella posizione. Non sono sicuro di quale grado IE supporti questo metodo, forse qualcun altro lo sa?

http://developer.mozilla.org/en/DOM/document.createEvent

Aggiornamento: Ecco un plugin jQuery che simula gli eventi:

http://jquery-ui.googlecode.com/svn/trunk/tests/simulate/jquery.simulate.js

Answer 10

function getDivByXY(x,y) { 
    var alldivs = document.getElementsByTagName('div'); 

    for(var d = 0; d < alldivs.length; d++) { 
     if((alldivs[d].offsetLeft == x) && (alldivs[d].offsetTop == y)) { 
     return alldivs[d]; 
     } 
    } 

    return false; 
} 

Answer 11

Purtroppo, innescando un evento del mouse prodotto/simulato non funziona, da quando lo spedisci, devi fornire un elemento target. Dato che quell'elemento è quello che stai cercando di capire, tutto ciò che puoi fare è inviarlo sul corpo, come se fosse già gorgogliato.

Hai davvero la possibilità di farlo da solo, cioè cammina manualmente tra gli elementi a cui sei interessato e confronta la loro posizione/dimensione/zIndex al tuo punto x/y per vedere se si sovrappongono. Tranne che in IE e più recentemente FF3, dove è possibile utilizzare

var el = document.elementFromPoint(x, y); 

Vedi

http://developer.mozilla.org/En/DOM:document.elementFromPoint

http://msdn.microsoft.com/en-us/library/ms536417(VS.85).aspx