Javascript 检查对象是否在css边框/css包装器内

首先，我想说我对整个编程领域都是新手。这是我在学校的第一个关于ICT的jQuery项目。
该项目：
我有多个可拖动的对象（图像）。它们在#wrapper中，wrapper是我的风格。css
现在，我想让图像在包装器下的背景图像（居中）上拖动时，它们将从图像更改。通过获取每个对象的位置，我成功地做到了这一点：

     drag: function(){
        var who = $("#draggable1");
        var offset1 = who.offset();
        var xPos1 = offset1.left;
        var yPos1 = offset1.top;
        $('#posX').text('x: ' + xPos1);
        $('#posY').text('y: ' + yPos1);

然后检查对象的位置，如果它在我的背景图片的X和Y范围内，它们会发生变化：

    if(yPos1 > '115' && yPos1 < '578')
            {
            this.src = 'pinkward5.png'
            }

if（yPos1>'115'和&yPos1<'578'）
{
this.src='pinkward5.png'
}

如果对象被放置在背景图像之外，这将使其返回其原始位置：

    if(xPos1 < '717' || xPos1 > '1202')
            {
            who.animate({ 'top': offset1.top == '0', 'left': offset1.left == '0'}, 200, function(){
            who.stop( true,true );
            who.mouseup();
            this.src = 'visionward.png'
            });

if（xPos1<'717'| | xPos1>'1202'）
{
动画（{'top'：offset1.top='0'，'left'：offset1.left=='0'}，200，函数（）{
谁。停止（真的，真的）；
who.mouseup（）；
this.src='visionward.png'
});

但是：
如果我使用另一个分辨率的显示器，或者将浏览器保留在屏幕的一半上，坐标会发生变化，代码也不会正常工作，因为偏移量会发生变化。
我的问题：
无论浏览器的分辨率或窗口如何，坐标都是相同的。可以使用百分比或检查对象是否在背景图像的css边框内

---

谢谢！我希望我没有违反stackoverflow规则。

为什么要硬编码坐标？ 只需在背景图像上调用“offset（）”即可获得坐标，就像在可拖动元素上所做的一样，并使用其宽度和高度计算边界

var bkgd = $('.whatever-you-name-the-background-image-class');
var bkgd_offset = bkgd.offset();
if(xPos1 >= bkgd_offset.left && xPos1 + who.width() <= bkgd_offset.left + bkgd.width() && 
   yPos1 >= bkgd_offset.top && yPos1 + who.height() <= bkgd_offset.top + bkgd.height())
    /* draggable inside background */;
else
    /* not inside background */;

var bkgd=$（'.无论您如何命名背景图像类'）；
var bkgd_offset=bkgd.offset（）；
如果（xPos1>=bkgd_offset.left&&xPos1+who.width（）=bkgd_offset.top&&yPos1+who.height（）