How to get coordinates of upper left corner of a div

Question

How to get coordinates of upper left corner of a div

464 Views Asked by Saeed Eisakhani At 04 November 2021 at 00:09

I am trying to get coordinates of upper left corner of a dragable div inside parent div. I can get coordinates of mouse in parent div and this is done by a onmousemove tag. I wounder that is there any similar tag, for example onmove to use to get coordinates of a div. the code I used is below

<!DOCTYPE html>
<html>
        <style>
        #parent {
            width: 148mm;
            height: 160mm;
            background-color: yellow;
            position: relative;
            <!--border: 3px solid #e5e5e5;-->
            
        }
        #mydiv {
          position: absolute;
          z-index: 9;
          
          text-align: center;
          border: 1px solid #d3d3d3;
        }

        #mydivheader {
          padding: 10px;
          cursor: move;
          z-index: 10; 
        }
        </style>

        <body>
            <div id="parent" style="float:left" onmouseout="clearCoor()">
                <div id="mydiv">
                  <div id="mydivheader" onmove="showCoords(event)"><img src="bc.png" alt="image"></div>
                </div>
            </div>
            <p id="demo"></p>
        <script>
        //Make the DIV element draggagle:
        dragElement(document.getElementById("mydiv"));

        function dragElement(elmnt) {
          var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
          if (document.getElementById(elmnt.id + "header")) {
            /* if present, the header is where you move the DIV from:*/
            document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
          } else {
            /* otherwise, move the DIV from anywhere inside the DIV:*/
            elmnt.onmousedown = dragMouseDown;
          }

          function dragMouseDown(e) {
            e = e || window.event;
            e.preventDefault();
            // get the mouse cursor position at startup:
            pos3 = e.clientX;
            pos4 = e.clientY;
            document.onmouseup = closeDragElement;
            // call a function whenever the cursor moves:
            document.onmousemove = elementDrag;
          }

          function elementDrag(e) {
            e = e || window.event;
            e.preventDefault();
            // calculate the new cursor position:
            pos1 = pos3 - e.clientX;
            pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;
            
            let parentElement = elmnt.parentElement;
            if(elmnt.offsetTop < 0){elmnt.style.top = "0px"; return;}
            if(elmnt.offsetTop > (parentElement.offsetHeight - elmnt.offsetHeight))     {
                elmnt.style.top = (parentElement.offsetHeight - elmnt.offsetHeight) + "px"; 
                return;
              }
            if(elmnt.offsetLeft < 0){elmnt.style.left = "0px";return}
            if(elmnt.offsetLeft > (parentElement.offsetWidth - elmnt.offsetWidth)){
                elmnt.style.left = (parentElement.offsetWidth - elmnt.offsetWidth) + "px";
                return;
            }
            
            // set the element's new position:
            elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
            elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
          }

          function closeDragElement() {
            /* stop moving when mouse button is released:*/
            document.onmouseup = null;
            document.onmousemove = null;
          }
        }

function showCoords(event) {
  var x = event.clientX;
  var y = event.clientY;
  var coor = "X coords: " + x + ", Y coords: " + y;
  document.getElementById("demo").innerHTML = coor;
}

function clearCoor() {
  document.getElementById("demo").innerHTML = "";
}

        </script>


        </body>
        
</html>

I used tag onmove but it did not work.

Original Q&A

There are 1 best solutions below

**Professor Abronsius** · Accepted Answer · 2021-11-04T08:54:58.797000

If I understood correctly that you wish to get the coordinates of the actual draggable object whilst it is being dragged then perhaps getBoundingClientRect is what you seek?

I modified the original HTML to remove the need for IDs on elements as when you start concatenating strings to IDs to identify an element things are going a little astray. There are other far better methods to identify DOM elements and perhaps the most useful are querySelector and querySelectorAll which are both written below in shorthand notation using an arrow function for brevity.

The getBoundingClientRect function has also been abbreviated to box which is called within the showCoords function as let obj=box(event.target); where the event.target is derived from the externally registered event listener, like so:

q('.draggable > div').addEventListener('mousemove',showCoords); // the event is implicitly applied...

Rather than onmove the event you need is actually onmousemove in this case - again assigned here with an external listener rather than the older, inline type onmousemove=func(e) etc

const box=(n)=>n.getBoundingClientRect();
const q=(e,n=document)=>n.querySelector(e);
const qa=(e,n=document)=>n.querySelectorAll(e);



qa('.draggable').forEach(el=>dragElement(el));
q('.draggable > div').addEventListener('mousemove',showCoords);
q('.parent').addEventListener('mouseout',clearCoor);






function dragElement(n) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  let child=q('div',n);

  if ( child ) child.onmousedown = dragMouseDown;
  else n.onmousedown = dragMouseDown;

  
  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    pos3 = e.clientX;
    pos4 = e.clientY;

    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();

    
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;

    let parentElement = n.parentNode;
    if( n.offsetTop < 0 ){ n.style.top = "0px"; return; }
    
    if( n.offsetTop > ( parentElement.offsetHeight - n.offsetHeight ) ){
      n.style.top = (parentElement.offsetHeight - n.offsetHeight) + "px"; 
      return;
    }
    
    if( n.offsetLeft < 0 ){ n.style.left = "0px"; return }
    if( n.offsetLeft > ( parentElement.offsetWidth - n.offsetWidth ) ){
      n.style.left = ( parentElement.offsetWidth - n.offsetWidth ) + "px";
      return;
    }

    n.style.top = (n.offsetTop - pos2) + "px";
    n.style.left = (n.offsetLeft - pos1) + "px";
  }


  function closeDragElement() {
      document.onmouseup = null;
      document.onmousemove = null;
  }
}//close parent function `dragElement`


function showCoords(event) {
  let obj=box(event.target);
  
  let str=`
    X:${event.clientX}
    Y:${event.clientY}
    <br />
    Top-Left:${obj.top.toFixed(2)}px, ${obj.left.toFixed(2)}px
    Top-Right:${obj.top.toFixed(2)}px, ${obj.right.toFixed(2)}px
    <br />
    Bttm-Left:${obj.bottom.toFixed(2)}px, ${obj.left.toFixed(2)}px
    Bttm-Right:${obj.bottom.toFixed(2)}px, ${obj.right.toFixed(2)}px`;
  
  q("#demo").innerHTML = str;
}

function clearCoor() {
  q("#demo").innerHTML = "";
}

.parent{
  width: 148mm;
  height: 160mm;
  background-color: yellow;
  position: relative;
  border: 3px solid #e5e5e5;
}

.draggable{
  position: absolute;
  z-index: 9;
  text-align: center;
  border: 1px solid #d3d3d3;
}


.draggable > div{
  padding: 10px;
  cursor: move;
  z-index: 10; 
}

#demo{
  min-height:3rem;
  font-family:monospace;
  font-size:smaller;
}

<p id='demo'></p>

<div class='parent'>
  <div class='draggable'>
    <div>
      <img src='//placekitten.com/200/200?image=15' alt='image' />
    </div>
  </div>
</div>

How to get coordinates of upper left corner of a div

There are 1 best solutions below

Related Questions in HTML

Related Questions in COORDINATES

Related Questions in DRAGGABLE

Related Questions in ONMOUSECLICK

Trending Questions

Popular # Hahtags

Popular Questions