jquery - jquery中拖拽后如何获取图像的xy坐标？

Question

我在获取矩形的 x y 坐标时遇到问题。

实际上我已经得到了x y坐标，但它不正确..我使用了Visual Studio 2008..n使用了jquery..ok，设计是这样的:

我有一个名为“drg”的div..那是一个大盒子..在div(大盒子)内有一个矩形图像。我将矩形拖到 div 的左上角，但结果为 x=8，n y=8。逻辑上，代码从 div 外部开始计数。这就是为什么得到 x=10 n 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...它从蓝色框外计数..我希望它从蓝色框 n 中计数如果图像(红框)的位置是这样的，则得到x=0，y=0。

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

<强> Complete demo with above two events

根据评论

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