Fatal编程技术网
  • javascript/
  • Javascript 鼠标点击将xy坐标转换成PHP变量

Javascript 鼠标点击将xy坐标转换成PHP变量

javascript php variables

Javascript 鼠标点击将xy坐标转换成PHP变量,javascript,php,variables,Javascript,Php,Variables,下面的脚本将球从盒子内的一个位置移动到另一个位置 我想在这个框中收集鼠标点击位置的坐标，并将X和Y坐标转换为PHP变量，这样一些额外的PHP代码可以处理这个问题 请问怎么做 <!DOCTYPE html> <html> <head> <title>Move to Click Position</title> <style type="text/css"> body { background-color: #FFF;

下面的脚本将球从盒子内的一个位置移动到另一个位置

我想在这个框中收集鼠标点击位置的坐标，并将X和Y坐标转换为PHP变量，这样一些额外的PHP代码可以处理这个问题

请问怎么做

<!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>


移动到单击位置
身体{
背景色：#FFF；
利润率：30像素；
边缘顶部：10px；
}
#内容容器{
宽度：550px；
高度：350px；
边框：5px黑色实心；
溢出：隐藏；
背景色：#F2F2；
光标：指针；
}
#东西{
位置：相对位置；
左：50px；
顶部：50px；
过渡：左。5s缓进，顶部。5s缓进；
}
var theThing=document.querySelector（#thing”）；
var container=document.querySelector（“contentContainer”）；
container.addEventListener（“单击”，getClickPosition，false）；
函数getClickPosition（e）{
var parentPosition=getPosition（如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；
}
//获取元素确切位置的辅助函数
功能位置（el）{
var-xPos=0；
var-yPos=0；
while（el）{
如果（el.tagName==“主体”）{
//通过正文/窗口/文档和页面滚动处理浏览器的怪癖
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）；
}否则{
//适用于所有其他非实体元素
xPos+=（el.offsetLeft-el.scrollLeft+el.clientLeft）；
yPos+=（el.offsetTop-el.scrollTop+el.clientTop）；
}
el=el.offsetParent；
}
返回{
x:xPos，
y:yPos
};
}
然后，我可以在其他脚本中处理这些

如果有人能解释这是如何实现的，我们将不胜感激

谢谢

如果有人做了同样的事情，我已经仔细查看并找到了解决方案

    <!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>


移动到单击位置
身体{
背景色：#FFF；
利润率：30像素；
边缘顶部：10px；
}
#内容容器{
宽度：614px；
高度：864px；
边框：5px黑色实心；
溢出：隐藏；
背景：url（Sample Contract Agreement Letter.jpg）左上方无重复；
背景色：#F2F2；
光标：指针；
}
#东西{
位置：相对位置；
左：50px；
顶部：50px；
过渡：左。5s缓进，顶部。5s缓进；
}
var theThing=document.querySelector（#thing”）；
var container=document.querySelector（“contentContainer”）；
container.addEventListener（“单击”，getClickPosition，false）；
函数getClickPosition（e）{
var parentPosition=getPosition（如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；
}
//获取元素确切位置的辅助函数
功能位置（el）{
var-xPos=0；
var-yPos=0；
while（el）{
如果（el.tagName==“主体”）{
//通过正文/窗口/文档和页面滚动处理浏览器的怪癖
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）；
}否则{
//适用于所有其他非实体元素
xPos+=（el.offsetLeft-el.scrollLeft+el.clientLeft）；
yPos+=（el.offsetTop-el.scrollTop+el.clientTop）；
}
el=el.offsetParent；
}
返回{
x:xPos，
y:yPos
};
}
如果您使用客户端脚本而不是phpy来处理它们，这样的功能会更好。您可以使用ajax调用将X，Y值传递给PHP。然而，要让PHP为用户进行更新，您很可能需要刷新页面。因此，正如前面的评论所说，也许可以尝试用JavaScript来完成整个过程。当然，您可以使用PHP魔法将其保存在数据库中，并通过另一个ajax调用检索新数据。hi@Vishwa可能是这样，但我需要在PHP进程中使用它们，所以每次单击都要提交表单？无论如何，在窗体上创建两个隐藏的输入字段，并在单击事件时在这些字段中保存X、Y值。然后在需要的时候提交表单。让表单提交触发一些JS，在表单提交之前提取X和Y位置。在表单数据中包含这些值。