檢查對象是否在css border/css wrapper中

我想先說我是整個編程場景的新手。這是我第一個在學校使用ICT的jQuery項目。
該項目：
我有多個可拖動對象（圖像）。它們在#wrapper中，包裝在我的style.css中
現在我想讓它在圖像被拖動到背景圖像上時（居中）位於包裝下，它們將從圖像中更改。我已經讓每個對象的位置，成功地做到了這一點：檢查對象是否在css border/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規則。

來源

2013-10-10 user2249899

爲什麼要硬編碼座標？只需在背景圖像上調用「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 */;

來源

2013-10-10 08:35:19

檢查對象是否在css border/css wrapper中

回答

相關問題