如何在瀏覽器窗口大小隨js＆jQuery更改時相應調整/縮放/重新定位所有div？

Question

你好，我目前有一個非常簡單的網站。它由是全畫幅和div容器...背景圖像動態地爲中心，放置CSS規則，像這樣一個背景圖像：

html { 
    background: url(../images/hotel_room.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

這似乎也爲我工作，並保持背景圖像以一種「響應式」的方式定位，這正是我所要做的！

我也有一個容器的div是全寬和定位這樣的：

#mega_wrap{ 
    position: absolute; 
    top:0; 
    left: 0; 
    height: 100%; 
    width:100%; 
} 

接着我有一些簡單的jQuery，基於在鼠標是附加一個div來使用一個onClick的#mega_wrap容器目前它被點擊......像這樣：

$(document).ready(function() { 

    //onClick append a resizable & draggable div with handles on all 4 corners 
    $('#mega_wrap').click(function(e){ 

     //Define element css and positioning then add both draggable and resizable from jQuery UI 
     var ele = $("<div>"); 
      ele.css({width:"100px", height:"100px", border:"3px dashed white", position:"absolute", left: e.pageX - 50, top: e.pageY -50}); 
      ele.draggable(); 
      ele.resizable({ 
       handles: 'all' 
      }); 

     //Define elements handles and append them to the new div 
     var eleHandleNE = $("<div class='ui-resizable-handle ui-resizable-ne' id='negrip'>"); 
     var eleHandleSE = $("<div class='ui-resizable-handle ui-resizable-se' id='segrip'>"); 
     var eleHandleSW = $("<div class='ui-resizable-handle ui-resizable-sw' id='swgrip'>"); 
     var eleHandleNW = $("<div class='ui-resizable-handle ui-resizable-nw' id='nwgrip'>"); 

      eleHandleNE.appendTo(ele); 
      eleHandleSE.appendTo(ele); 
      eleHandleSW.appendTo(ele); 
      eleHandleNW.appendTo(ele); 

     //Append new div to the container div called mega_wrap 
     $("#mega_wrap").append(ele); 

    }); 
}); 

注意：所有的div都在各個角落調整大小，拖動使用jQuery ...所以的div有可能是任何尺寸和內部的容器#mega_wrap任何地方.......這是我的問題開始的地方：

我正在尋找一種方法來跟蹤所有附加的DIVS的位置使用某種變量每格可能？！使用JavaScript或jQuery？然後，我需要能夠更新該變量，如果/當div被調整大小或拖動容器！

並最終...當窗口調整大小時，我需要divs在背景圖像上調整其精確的舊位置......因此，每個div都可以根據比例鎖定比例（向上或向下）窗口大小？！？

注：思考我可能不得不根據提供的解決方案做不同的背景圖像？打開建議....也許從.css更改爲.js或PHP？

的幫助感激.... TIY

Answer 1

我通常一個屬性添加到每個格：

var eleHandleNE = '<div class="ww xx yy" id="zz" iniWidth="100" iniHeight="200">'; 

後來，當$（窗口）.resize（...）火災（或者你正在使用什麼），查找屬性，它的規模：

$(this).width($(this).attr('iniWidth')*ratio); 
$(this).height($(this).attr('iniHeight')*ratio); 

BTW，不要被pendantic（ESP因爲我暗示廣告。 ding非標準的屬性標籤），但你的id應該都是唯一的。如果是，則另一種選擇是創建一個對象數組來存儲所有初始數據。然後，您可以使用數組和ID來檢索/設置您的值：

//initial div's attrs 
divArray = new Array({id:'#id0',width:100,height:200},{id:'#id1',width:50,height:90}); 
... 
//adding another div later 
divArray[divArray.length] = {id:'#id2',width:300,height:500}; 

//Resize stuff... 
function resizeStuff(divArray,ratio) { 
    for(i=0;i<divArray.length; i++) { 
    $(divArray[i].id).width((divArray[i].width*ratio); 
    $(divArray[i].id).height((divArray[i].height*ratio); 
    } 
}