다른 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가 200px 너비이고 900px Left이면 1100px로 끝납니다.

1000px 해상도 인 경우 (최대 화면 해상도 - 상자 너비), 왼쪽 = (1000px - 200px) = 800px의 왼쪽으로 옮길 수 있습니다.