LP

cqw.js

(() => {
    let points = []

    const handleClick = (event) => {
      const section = event.target.closest('section')
      if (!section) return
  
      const rect = section.getBoundingClientRect()
      const sectionWidth = rect.width
      const x = (event.clientX - rect.left) / sectionWidth * 100
      const y = (event.clientY - rect.top) / sectionWidth * 100
  
      points.push({ x, y })
  
      if (points.length === 2) {
        const [p1, p2] = points
        const top = (Math.min(p1.y, p2.y)).toFixed(2)
        const left = (Math.min(p1.x, p2.x)).toFixed(2)
        const width = (Math.abs(p1.x - p2.x)).toFixed(2)
        const height = (Math.abs(p1.y - p2.y)).toFixed(2)
  
        console.log(`top: ${top}cqw; left: ${left}cqw; width: ${width}cqw; height: ${height}cqw;`)
        points = []
      }
    }
  
    document.addEventListener('click', handleClick)
})()

position.js

document.addEventListener('click', function(event) {
    const clickedElement = event.target;
    const sectionElement = clickedElement.closest('.section');
    if (sectionElement) {
        const sectionRect = sectionElement.getBoundingClientRect();
        const clickX = event.clientX;
        const clickY = event.clientY;
        const relativeX = ((clickX - sectionRect.left) / sectionRect.width);
        const relativeY = ((clickY - sectionRect.top) / sectionRect.height);
        console.log(`style="--top: ${(relativeY * 1080).toFixed(2)}; --left: ${(relativeX * 1080).toFixed(2)};"`);
    }
});