What is the process to obtain the new top and left coordinates of a child div within a parent div that has been rotated?

Question

What is the process to obtain the new top and left coordinates of a child div within a parent div that has been rotated?

I'm attempting to utilize the updated top and left positions of a child div within a rotated parent in order to restrict the draggable area of the parent itself. I am implementing jquery draggable for this purpose.

EDIT: You can find the

<a href="https://jsfiddle.net/2pftt16a/" rel="nofollow noreferrer">jsfiddle here</a>

. My plan is to utilize the red dot on the rotated div as a marker to determine if it collides with the boundaries of the container. I need to extract the new position (top and left) of that red marker so that I can use my existing function to constrain the draggable element.

javascript jquery css

Answer 1

Answer №1

When determining the offset for the top or left of an element, it is essential to utilize the .getBoundingClientRect() method and take into consideration the window scroll.

This principle applies even to rotated elements, as illustrated in the example below:

function findTopLeft(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return {
    top: rec.top + window.scrollY,
    left: rec.left + window.scrollX
  };
}

console.log(findTopLeft('inner'));

#outer {
  position: absolute;
  top: 25%;
  left: 25%;
  width: 100px;
  height: 50px;
  border: 1px solid black;
  transform: rotate(90deg);
}

<div id="outer">
  <div id="inner">Text</div>
</div>

We hope this information proves helpful! :)

Answer 2

When determining the offset for the top or left of an element, it is essential to utilize the .getBoundingClientRect() method and take into consideration the window scroll.

This principle applies even to rotated elements, as illustrated in the example below:

function findTopLeft(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return {
    top: rec.top + window.scrollY,
    left: rec.left + window.scrollX
  };
}

console.log(findTopLeft('inner'));

#outer {
  position: absolute;
  top: 25%;
  left: 25%;
  width: 100px;
  height: 50px;
  border: 1px solid black;
  transform: rotate(90deg);
}

<div id="outer">
  <div id="inner">Text</div>
</div>

We hope this information proves helpful! :)

What is the process to obtain the new top and left coordinates of a child div within a parent div that has been rotated?

Answer №1

Similar questions

Troubleshooting: Why isn't my Axios PUT request functioning properly?

changing the data with the d3 streamgraph transition

The Material UI Drawer stays closed despite the state being set to true

Tips for achieving comma-separated user input via ngModel and appending it to an array

Adjust the color of additional SVG paths upon hovering

Change the structure of the JavaScript object into a new format

What is the optimal location for making API requests in a React/Redux/Reach Router application?

PHP PDO: Object automatically destructs once the function is called

Utilize ajax to round the floating point number

Format the date using moment() for the last week of the current year and return it with the year. Next year's

Issue of displaying buttons based on sibling's height under certain conditions

What is the process for transforming this information into JSON format with Javascript?

Incorporating ajax and jquery into html: Step-by-step guide

``There seems to be a problem with navigating to a specific

Converting the OpenCV GetPerspectiveTransform Matrix to a CSS Matrix: A Step-by-Step Guide

Ensure the scrollbar is noticeable and personalized solely within a designated div, such as the left side menu

What could be the reason for the absence of search results in my searchbox?

Having difficulty displaying the JSON returned from a JQUERY AJAX request in CodeIgniter

Utilize Node.js to efficiently send emails to a group of subscribed clients

Preventing default events and continuing with jQuery