安排在另一個div盒內的div盒，以適應小和大的屏幕寬度靈活

Question

我試圖創建一個功能，允許用戶拖動div盒，然後用樣式更新數據庫，以便當他們回到頁面會記住它們的位置並將這些框放在正確的位置（相對於父div）。

我現在有這個工作，但是，如果用戶使用1600px的屏幕寬度來定位框，然後打開頁面說他們的iPad或更小的屏幕尺寸，比如說說1000px，那麼如果它們被定位太接近父母的邊界。

我需要一些幫助，弄清楚如何在父級內部安排div盒，但是當它們轉到不同的屏幕尺寸時，使它變得如此靈活，盒子仍然會在那裏。

我創建了一個jsfiddle來模擬這種情況。

Jsfiddle link

HTML代碼：

<div id="dashboard_wrapper"> 
    <div class="ui-corner-all border_all_grey dashboard_widget drag_drop"> 
    Box 1 
    </div> 
    <div class="ui-corner-all border_all_grey dashboard_widget drag_drop"> 
    Box 2 
    </div>    
</div> 
<div id="box_positions"></div> 

和JS代碼：

$(".drag_drop, .drag_drop_chart").resizable(); 
$(".drag_drop, .drag_drop_chart").draggable({ 
    start: function(event, ui) {$(this).trigger("click")}, 
    stop: function (event, ui) { 
     var position = $(this).position(); 
     var offset = $(this).offset(); 
     var top = position.top; 
     var left = position.left; 
     var max_top = 0; 

     if(top < 0){ $(this).css({"top":1}); } 
     if(left < 0){ $(this).css({"left":1}); }          
     if(top > 800){ $(this).css({"top":800}); } 

     $(".drag_drop, .drag_drop_chart").each(function() { 
      //Find the box with the largest "top" value 
      var x_top = $(this).position().top; 
      if(max_top < x_top){ max_top = x_top; } 
     }); 

     var height = max_top + 280; 
     $("#dashboard_wrapper").css({"height":height}); 

     var style = $(this).attr("style"); 
     var box = $(this).text(); 
     $("#box_positions").append(box + ": style=" + style + "<br/>"); 
    } 
}); 

var boxes = $(".drag_drop, .drag_drop_chart"); 

// Set up click handlers for each box 
boxes.click(function() { 

    var el = $(this), // The box that was clicked 
    max = 0; 

    // Find the highest z-index 
    boxes.each(function() { 
     // Find the current z-index value 
     var z = parseInt($(this).css("z-index"), 10); 
     if (isNaN(z)){ z = 1; } 

     // Keep either the current max, or the current z-index, whichever is higher 
     max = Math.max(max, z); 
    }); 

    // Set the box that was clicked to the highest z-index plus one 
    el.css("z-index", max + 1); 
}); 

任何幫助和想法可以理解的。在此先感謝

Answer 1

只需在打開頁面時檢查當前分辨率。

向左移動任何位於可見區域外的框。

檢查是否使用Box Left Position加Box Width。

例如，如果一個Box的寬度是200px，而它的左邊是900px，則它以1100px結尾。

如果您現在處於1000px分辨率，您可以將其左移（最大屏幕分辨率 - 框的寬度），然後左=（1000px - 200px）= 800px。