jquery - 如何从可拖动的jQuery UI中获得位置x和y？

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

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

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

最佳答案

在stop回调中，您可以使用ui.helper访问拖动的元素。然后在其上使用 offset，正如 Brad 建议的那样:

$("#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 中找到了解决方案)

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

Wrapper

jquery - 如何从可拖动的jQuery UI中获得位置x和y？