Jquery：将鼠标悬停在弹出窗口元素上，读取父位置

Question

我在html页面中有可移动（拖动）弹出窗口，如下所示：

当我将.prd_img元素悬停在弹出窗口内时，我能够像这样得到鼠标X Y坐标：

$(".prd_img").hover(function(e){
    window.parent.$("body").append("<p id='preview'><img src='"+ this.src +"' alt='product image' /><\/p>");    


 $(this).mousemove(function(event) {
    currentMousePos.x = event.pageX;
    currentMousePos.y = event.pageY;

    console.log("x: "+currentMousePos.x+" y:"+currentMousePos.y);
    window.parent.$("#preview").css({'display':'block', 'top': currentMousePos.y, 'left':currentMousePos.x});
 });    

},
function(){
    window.parent.$("#preview").remove();
}); 

我将使用以下方法在父窗口上显示大图像的图像：  window.parent.$("body").append("<p id='preview'><img src='"+ this.src +"' alt='product image' /><\/p>");

问题是：鼠标悬停坐标是来自弹出窗口本身，而不是来自父窗口（主页面）。当它在父级上显示<p id='preview'>时，位置将如下所示： 每当我拖动移动弹出窗口时，图像将显示在几乎相同的位置。

我如何制作它，每当我拖放弹出窗口时，当我悬停.prd_img类时，我将始终读取父坐标，而不是弹出坐标，以便将图像放大到父级，它将总是这样：

#preview的css是：

#preview{
    position: absolute;
    border:1px solid #ccc;
    background:#333;
    padding:5px;
    display:none;
    color:#fff;
    z-index: 9999;
    pointer-events: none;
    }

任何帮助都会很棒。