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

Posted 2023-05-08

【中文标题】在两个不同大小的移动设备上返回相同的 x 和 y 坐标

【英文标题】：returning the same x and y co-ordinates on two differently sized mobile devices

【发布时间】：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 且没有其他内容，您的假设是正确的。

【参考方案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"
    );