Question

我正在使用.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>

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

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

1 个答案: