在兩個不同大小的移動設備上返回相同的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座標

回答

相關問題