Проверьте, находится ли объект внутри рамки css border/css wrapper

Question

Я хотел бы начать с того, что я новичок во всей сцене программирования. Это мой первый проект jQuery для ИКТ в школе.
Проект:
У меня есть несколько перетаскиваемых объектов (изображений). Они находятся в #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(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' 
      }); 

НО:
Если я использую другой монитор с другим разрешением или оставляю браузер на половине экрана, меняются координаты, а код doenst работает так, как должен, потому что смещение изменяется.
Мой вопрос:
Как я могу сделать, что независимо от того, что разрешение или окно браузера, координаты совпадают. Может быть, с процентами или проверить, находится ли объект в границе 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 */;