如何从jQuery ui draggable获取位置x和y?

前端之家收集整理的这篇文章主要介绍了如何从jQuery ui draggable获取位置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访问拖动的元素.然后使用偏移,就像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/

原文链接:https://www.f2er.com/jquery/181514.html

猜你在找的jQuery相关文章