javascript - 检查对象是否在 css border/css wrapper 内

Question

首先我想说我是整个编程领域的新手。这是我在学校的第一个 ICT jQuery 元素。
该元素:
我有多个可拖动对象(图像)。它们在#wrapper 中，wrapper 在我的 style.css 中
现在我想做的是，当图像被拖动到​​位于 wrapper 下的背景图像(居中)上时，它们将从图像中改变。我通过获取每个对象的位置成功地完成了这项工作:

     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(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'
            });

但是:
如果我使用另一台分辨率不同的显示器或将浏览器留在屏幕的一半，坐标会发生变化，并且代码会正常工作，因为偏移量会发生变化。
我的问题:
我怎样才能做到无论浏览器的分辨率或窗口如何，坐标都是相同的。也许用百分比或检查对象是否在背景图像的 css 边框内？

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

Answer 1

为什么要硬编码坐标？ 只需在背景图像上调用“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 */;