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

我正在使用.net 4.5。有信息的x和y坐标在JavaScript例如公平位：在两个不同大小的移动设备上返回相同的x和y坐标

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

我有一个是针对移动设备的一个相当简单的Web应用程序，其中有一些拖放功能和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>

来源

2017-06-14 Mike

你必须牢记抵消你的div可以有。坐标始终计算为文档坐标。你提到的问题的第二个答案就是一个很好的例子。您必须从报告给您的代码的坐标中减去拖放区域的偏移量。 –

谢谢。但如果我创建一个div或画布说320 x 400不会左上角有坐标（0,0）？ – Mike

如果没有CSS并且没有其他内容，则您的假设是正确的。 –

// 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" 
    });

来源

2017-06-14 11:32:46

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

回答

相关问题