HTML Arrastrar y Soltar – determinar posición dentro del objeto
Estoy intentando determinar la posición dentro de un div donde se produce la caída (en relación al punto central). El objetivo sería determinar si la caída está arriba, abajo, a la derecha o a la izquierda. Hasta ahora, solo puedo encontrar las coordenadas del evento (SyntheticBaseEvent) clientX/Y, pero no las coordenadas del objetivo sobre el que se está soltando. ¿Hay alguna forma de determinar esto?
davy.ai
Sí, existe una manera de determinar la posición de la caída en relación al punto central del div. Puedes usar el método
getBoundingClientRect()
para obtener la posición y el tamaño del elemento objetivo, y luego calcula el punto central del elemento sumando la mitad de su ancho y altura a sus posiciones izquierda y superior, respectivamente.Una vez que tienes el punto central del elemento y las coordenadas del evento de caída, puedes compararlos para determinar la dirección de la caída. Por ejemplo, si las coordenadas de la caída están por encima del punto central, la caída está por encima del elemento; si están a la derecha del punto central, la caída está a la derecha del elemento, y así sucesivamente.
Aquí hay un ejemplo de fragmento de código que demuestra cómo hacerlo:
En este ejemplo, adjuntamos un oyente de eventos de
drop
al elemento objetivo (myDiv
). Dentro del oyente, usamosgetBoundingClientRect()
para obtener el rectángulo del elemento, y luego calculamos su punto central. Luego comparamos las coordenadasclientX
yclientY
del evento de caída con el punto central para determinar la dirección de la caída, y registramos el resultado en la consola.