異なる2つのサイズのモバイルデバイスで同じx座標とy座標を返す

Question

私は.net 4.5を使用しています。そこにいくつかのドラッグだとドロップ機能を、どこで、私は、モバイルデバイスを対象としてかなり単純なWebアプリケーションを持っている

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

：JavaScriptの例では、xとy座標上の情報の公平なビットがありますx座標とy座標が格納されます。 基本的に部屋の背景イメージがあり、1つのモバイルデバイス（ユーザー1）の部屋に家具をドラッグアンドドロップすると、xとyのコーディネートがサーバーに保存され、その家具が理想的には画面サイズに関係なく同じ位置に別のモバイルデバイス（ユーザー2）で表示されます。

私はそれを処理する最善の方法は複雑すぎないので、divコンテナの幅と高さを320 x 400と設定し、そのコンテナにドラッグ＆ドロップを制限することだと思いました。そして、画面サイズが600 x 800、500 x 700など他の人物のデバイスであるかどうかは関係ありません。xとyの座標は常に320 x 400 divコンテナと同じになります。しかし、うーん、私はそれを働かせることはできません。

どのようなヒントもセンセーショナルです。あなたの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> 

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