在两个不同大小的移动设备上返回相同的 x 和 y 坐标答案

【问题标题】：returning the same x and y co-ordinates on two differently sized mobile devices在两个不同大小的移动设备上返回相同的 x 和 y 坐标
【发布时间】：2017-11-16 12:18:33
【问题描述】：

我使用的是 .net 4.5。 javascript 中有很多关于 x 和 y 坐标的信息，例如：

How do I get the coordinate position after using jQuery drag and drop?

我有一个相当简单的网络应用程序，它面向移动设备，其中有一些拖放功能并存储了 x 和 y 坐标。基本上会有一个房间的背景图像，您在一个移动设备（用户 1）上拖放房间中的一件家具，x 和 y 坐标存储在服务器上，这件家具就会出现在另一台移动设备（用户 2）上，无论屏幕大小如何，理想情况下都处于相同位置。

我认为最好的处理方法就是将 div 容器的宽度和高度设置为 320 x 400，并限制拖放到该容器。然后屏幕尺寸是否为 600 x 800、500 x 700 等在另一个人的设备上无关紧要，并且 x 和 y 坐标相对于 320 x 400 div 容器将始终相同。但是，唉，我不能让它工作。

任何提示都会引起轰动。

css
    .imgContainer {
        height: 400px;
        width: 320px;
    }

    img {
        position: relative;
    }


View
    <div class="imgContainer">
        <img src="~/Content/Images/image.jpg" class="img-responsive" />

        <img src="~/Content/Images/chair.png"  />
    </div>

【问题讨论】：

你必须记住你的 div 可能有的偏移量。坐标始终计算为文档坐标。您提到的问题的第二个答案就是一个很好的例子。您必须从报告给代码的坐标中减去拖放区的偏移量。
谢谢。但是如果我创建一个 div 或 canvas 说 320 x 400 左上角不会有坐标（0,0）吗？
如果没有 CSS 且没有其他内容，您的假设是正确的。

标签： javascript .net mobile

【解决方案1】：

   // Mouse co-ordinate position will get using onStart Fn.

    function onStart(evt, ui){
        ui.position.top=Math.round(ui.position.top);
        ui.position.left=Math.round(ui.position.left);
    }

   // After dropping will get using Dragged object positions from onDrop Fn.

    function onDrop(evt, ui){
        left = ui.draggable.css('left');
        top = ui.draggable.css('top');
    console.log(left, top);

    }

   // You can Restrict the container using containment parent.. 

    $( ".selector" ).draggable({
      containment: "parent"
    });

【讨论】：