javascript - オブジェクトが css ボーダー/ css ラッパー内にあるかどうかを確認します

Question

私はプログラミングシーン全体に不慣れだと言って始めたいと思います。これは、学校での ICT 向けの初めての jQuery プロジェクトです。
プロジェクト:
複数のドラッグ可能なオブジェクト (画像) があります。それらは #wrapper にあります。wrapper は私の style.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(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 境界内にあるかどうかをパーセンテージで確認したり、確認したりできますか?

ありがとう！スタックオーバーフローのルールに違反していないことを願っています。