0
229
VistasObtenga las coordenadas del elemento dentro del menú desplegable
Obtuve una lista desplegable y quiero mostrar información sobre cada elemento. Intenté algo como esto, siendo el item los elementos de la lista y el infobox de información como un div de posición fixed que proporciona la información:
item.addEventListener("mouseover", (e) => { e.stopPropagation(); if (e.target === e.currentTarget) { dropdownInformation.category_id = selectOptions.category_id[index]; document.getElementById("infobox").style.left = e.target.getBoundingClientRect().x + "px"; document.getElementById("infobox").style.top = e.target.getBoundingClientRect().y + "px"; } });¿Cómo obtuve las coordenadas correctas del borde derecho de las entradas de la lista?
(Sí, leí varias otras preguntas sobre ese tema en SO)
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Bueno, esto parece hacer el truco. Necesitaba agregar/restar el ancho/alto del elemento principal y la barra de desplazamiento.
item.addEventListener("mouseover", (e) => { e.stopPropagation(); if (e.target === e.currentTarget) { dropdownInformation.category_id = selectOptions.category_id[index]; e.target.style.borderLeft = "2px white solid"; document.getElementById("infobox").style.left = (e.target.getBoundingClientRect().x + e.target.getBoundingClientRect().width + (e.target.parentElement.offsetWidth - e.target.parentElement.clientWidth)) + "px"; document.getElementById("infobox").style.top = (e.target.getBoundingClientRect().y - (e.target.parentElement.getBoundingClientRect().height / 2)) + "px"; } });
·
Juan Pablo Isaza
Denunciar
Responde la pregunta