如何捕获文本的坐标开始？

Question

我可以使用jquery draggable，如下所示：

<script type="text/javascript">
        jQuery(document).ready(function(){
$('#dragThis').draggable(
    {
        stop:function(event,ui) {
        var teste = $("#teste").offset();
        var pos = ui.helper.offset();
        $("#posX").val(pos.left - teste.left);
        $("#posY").val(pos.top - teste.top);
        var posX = $("#posX").val();
        var posY = $("#posY").val();
        $('#X').val(posX);
        $('#Y').val(posY);


    },
        containment: "parent",
        cursor: "move",

    });
    });

    </script>

以获取精确坐标x和y的形式放入span标记

<div id="teste" style="width:200px; height:200px">    
<span id="dragThis">
    <input type="text" name="title" style="background: transparent">
      <span id="posX"></span>
      <span id="posY"></span>
    </span>
</div>

但问题是坐标是从输入的边缘开始的。 生成GD图像时，文本不完全符合它的位置：

如何捕捉文本的坐标开始？

谢谢帮助