如何在jquery中拖放图片后获取其xy坐标？

Question

我有一个问题，无法获取矩形的x y坐标。

实际上我已经得到了x y坐标，但是并不正确。我使用的是Visual Studio 2008和jQuery。设计如下：

我有一个名为“drg”的div，它是一个大盒子，在这个div（大盒子）中有一个图像作为矩形。我将矩形拖动到div的左上角，但结果是x=8，y=8。逻辑上讲，代码应该从div外部开始计数。这就是为什么会得到x=10和y=10的原因。

我想要当拖动到div的左上角时，结果必须是x=0，y=0。

这是我的代码：“im”是图像（红色方框）的ID。

$(document).ready(function() {
    // sets draggable the elements with id="im"
    $('#im').draggable({
        cursor: 'move',        // sets the cursor apperance
        containment: '#drg', 

        stop : function(){
            $("#value").text('x-axis :' + $('#im').offset().left + 'y-axis :' + $('#im').offset().top);

            var imgPosX = 10 - $("img#im").width();
            var imgPosY = 10 - $("img#im").height();

        }
    });
});

当我把图片（红框）拖到左上角时，它的x坐标是8，y坐标是8...它从蓝框外开始计数..我希望它从蓝框内开始计数，如果图片（红框）位于那里，则得到x=0，y=0。

- catcool

Answer 1

stop: function(event, ui) {

        // Show dropped position.
        var Stoppos = $(this).position();
        var left = Math.abs(Stoppos.left);
        var top = Math.abs(Stoppos.top);
    }

您可以在drag()事件中进行操作，如下所示：

   drag: function(){
        var offset = $(this).offset();
        var xPos = Math.abs(offset.left);
        var yPos = Math.abs(offset.top);
        $('#posX').text('x: ' + xPos);
        $('#posY').text('y: ' + yPos);
    }

这个完整的演示包括以上两个事件

根据评论

由于您不希望有负数值，因此请使用Math.abs()使所有值都为正数。

- thecodeparadox

---

但是，我不想要负值..只想要图像的位置..也就是说，如果我将图像向左或向右拖动，向上或向下拖动，我获得x和y的坐标，但不要负号，只想要数值.. - catcool

你能帮我吗？我已经得到了像演示中一样的图像坐标xy，但现在我正在编辑演示。我想让正方形框拖动到另一个大框中，但当我将正方形框拖到大框的末端时，它给出的坐标是x=8，y=8，而不是x=0，y=0，因为它从框外开始计数到正方形框。请帮帮我，我希望它是x=0，y=0。 - catcool

@Farahfathiah请在Fiddle上发布你的演示。 - thecodeparadox