Question

我正在尝试创建一个功能，允许用户拖动div框，然后用样式更新数据库，这样当他们回到页面时，它会记住他们的位置并将框放在正确的位置（相对于父母div。。

我目前有这个工作，但是，如果用户使用屏幕宽度为1600px定位框，然后打开页面上说他们的iPad或更小的屏幕尺寸说1000px然后如果它们也定位，那么这些框会消失靠近父边界。

我需要一些帮助来弄清楚如何在父母内部安排div盒子，但是当它们进入不同的屏幕大小时它会变得灵活，盒子仍然会存在。

我创建了一个jsfiddle来模拟情况。

HTML COde：

<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。

在另一个div框内安排div box，可以灵活地适应小屏幕和大屏幕宽度

1 个答案: