Getting X Y Coordinates into PHP variables on Mouse Click

Question

The following script moves a ball from one location to another inside a box.

I would like to gather the coordinates of where the mouse is clicked inside this box and convert the X and Y coordinates onclick over to PHP variables so some additional PHP code can process this.

How can this be done please?

<!DOCTYPE html>
<html>

<head>
<title>Move to Click Position</title>
<style type="text/css">
body {
    background-color: #FFF;
    margin: 30px;
    margin-top: 10px;
}
#contentContainer {
    width: 550px;
    height: 350px;
    border: 5px black solid;
    overflow: hidden;
    background-color: #F2F2F2;
    cursor: pointer;
}
#thing {
    position: relative;
    left: 50px;
    top: 50px;
    transition: left .5s ease-in, top .5s ease-in;
}
</style>
</head>

<body>
<div id="contentContainer">
    <img id="thing" src="//www.kirupa.com/images/smiley_red.png">
</div>

<script src="//www.kirupa.com/prefixfree.min.js"></script>
<script>
var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");

container.addEventListener("click", getClickPosition, false);

function getClickPosition(e) {
    var parentPosition = getPosition(e.currentTarget);
    var xPosition = e.clientX - parentPosition.x - (theThing.clientWidth / 2);
    var yPosition = e.clientY - parentPosition.y - (theThing.clientHeight / 2);

    theThing.style.left = xPosition + "px";
    theThing.style.top = yPosition + "px";
}

// Helper function to get an element's exact position
function getPosition(el) {
  var xPos = 0;
  var yPos = 0;

  while (el) {
    if (el.tagName == "BODY") {
      // deal with browser quirks with body/window/document and page scroll
      var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
      var yScroll = el.scrollTop || document.documentElement.scrollTop;

      xPos += (el.offsetLeft - xScroll + el.clientLeft);
      yPos += (el.offsetTop - yScroll + el.clientTop);
    } else {
      // for all other non-BODY elements
      xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
      yPos += (el.offsetTop - el.scrollTop + el.clientTop);
    }

    el = el.offsetParent;
  }
  return {
    x: xPos,
    y: yPos
  };
}
</script>
</body>
</html>

I can then process these in the other script I have.

If someone can explain how this can be achieved it would be greatly appreciated.

Thanks

functionality like this would be better if you handle them with client side scripting rather than php — Vishwa
– Vishwa, Commented Apr 30, 2019 at 4:53
You can use ajax calls to pass the X, Y values to PHP. However for PHP to make an update for the user you will most likely need to refresh the page. So as previous comment said maybe try to do the whole process in JavaScript instead. Ofcourse you could do your PHP magic and save it in a database and retrieve the new data with another ajax call. — Cray
– Cray, Commented Apr 30, 2019 at 4:57
So you are submiting a form on every click? Anyways make 2 hidden input fields on your form and save X, Y values in those fields on click events. Then submit the form whenever needed. — Cray
– Cray, Commented Apr 30, 2019 at 5:01
Have the form submission trigger some JS that pulls the X and Y locations prior to the form submit. Include the values in the form data. — user3783243
– user3783243, Commented Apr 30, 2019 at 5:09

Renegade Rob · Accepted Answer · 2019-04-30 06:16:00Z

I have looked through and found a solution if anyone is after doing the same thing.

    <!DOCTYPE html>
    <html>

    <head>
    <title>Move to Click Position</title>
    <style type="text/css">
    body {
        background-color: #FFF;
        margin: 30px;
        margin-top: 10px;
    }
    #contentContainer {
        width: 614px;
        height: 864px;
        border: 5px black solid;
        overflow: hidden;
        background: url(Sample-Contract-Agreement-Letter.jpg) top left no-repeat;
        background-color: #F2F2F2;
        cursor: pointer;
    }
    #thing {
        position: relative;
        left: 50px;
        top: 50px;
        transition: left .5s ease-in, top .5s ease-in;
    }
    </style>
    </head>

    <body>
    <div id="contentContainer">
    <img id="thing" src="//www.kirupa.com/images/smiley_red.png">
</div>

<script src="//www.kirupa.com/prefixfree.min.js"></script>
<script>
    var theThing = document.querySelector("#thing");
    var container = document.querySelector("#contentContainer");

    container.addEventListener("click", getClickPosition, false);

    function getClickPosition(e) {
        var parentPosition = getPosition(e.currentTarget);
        var xPosition = e.clientX - parentPosition.x - (theThing.clientWidth / 2);
        var yPosition = e.clientY - parentPosition.y - (theThing.clientHeight / 2);
        document.getElementById('myField1').value = xPosition;
        document.getElementById('myField2').value = yPosition;
        theThing.style.left = xPosition + "px";
        theThing.style.top = yPosition + "px";
    }

    // Helper function to get an element's exact position
    function getPosition(el) {
      var xPos = 0;
      var yPos = 0;

      while (el) {
        if (el.tagName == "BODY") {
          // deal with browser quirks with body/window/document and page scroll
          var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
          var yScroll = el.scrollTop || document.documentElement.scrollTop;

          xPos += (el.offsetLeft - xScroll + el.clientLeft);
          yPos += (el.offsetTop - yScroll + el.clientTop);
        } else {
          // for all other non-BODY elements
          xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
          yPos += (el.offsetTop - el.scrollTop + el.clientTop);
        }

        el = el.offsetParent;
      }
      return {
        x: xPos,
        y: yPos
      };
    }
    </script>

    <form action="test.php" method="post">


    <input type=”hidden” value="" id="myField1" name="myField1">
    <input type=”hidden” value="" id="myField2" name="myField2">

    <input type="submit" value="Submit">

    </form>
    </body>
    </html>

Collectives™ on Stack Overflow

Getting X Y Coordinates into PHP variables on Mouse Click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related