如何从可拖动的 jQuery ui 中获取位置 x 和 y？答案

【问题标题】：How do I get position x and y from jQuery ui draggable?如何从可拖动的 jQuery ui 中获取位置 x 和 y？
【发布时间】：2014-03-26 20:42:16
【问题描述】：

这里是一个例子http://jsfiddle.net/naqbq/

重新定位图像后如何获取x 和y 的当前位置？

<input type="hidden" name="source_x" id="source_x" />
<input type="hidden" name="source_y" id="source_y" />

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

在stop回调中，你可以使用ui.helper来访问被拖动的元素。然后按照布拉德的建议使用offset：

$("#image").draggable({
    stop:function(event,ui) {
        var wrapper = $("#wrapper").offset();
        var borderLeft = parseInt($("#wrapper").css("border-left-width"),10);
        var borderTop = parseInt($("#wrapper").css("border-top-width"),10);
        var pos = ui.helper.offset();
        $("#source_x").val(pos.left - wrapper.left - borderLeft);
        $("#source_y").val(pos.top - wrapper.top - borderTop);
        alert($("#source_x").val() + "," + $("#source_y").val());
    }
});

然后，只需将其调整为您的包装器 - 减去其偏移量和边框的宽度 - 并将其设置为您输入的 val。 ~~（抱歉硬编码边框，但我无法使用css 提取它）~~（编辑：就是这样！在another question 中找到了解决方案） p>

http://jsfiddle.net/mgibsonbr/naqbq/4/

【讨论】：

【解决方案2】：

你可以使用jQuery的.offset()。

http://api.jquery.com/offset/

alert($('#image').offset().top);
alert($('#image').offset().left);

【讨论】：

【解决方案3】：

你应该使用内置的停止事件：

$("#image").draggable({
    stop: function() { 
        // check for positioning here using .css or .offset
    }
});

【讨论】：

【解决方案4】：

可以获取top, lef:

$('selector').draggable({
  drag: function(event, ui) {
    ui.position.top; // .left
    // or
    $('selector').position().top; // current position of an element relative to the offset parent
    $('selector').offset(); // retrieves the current position relative to the document. 
  }
})

【讨论】：