0

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

我目前有这个工作，但是，如果用户使用 1600 像素的屏幕宽度定位框，然后在他们的 iPad 或较小的屏幕尺寸（例如 1000 像素）上打开页面，那么如果它们的位置太靠近父边界。

我需要一些帮助来弄清楚如何在父级内部排列 div 框，但是当它们转到不同的屏幕尺寸时，它会变得非常灵活，这些框仍然会在那里。

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

Jsfiddle 链接

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 );
});

任何帮助和想法将不胜感激。提前致谢

4

1 回答 1

0

只需在打开页面时检查当前分辨率。

将位于可见区域之外的任何框向左移动。

检查使用 Box Left Position 和 Box Width。

例如，如果一个 Box 的宽度为 200 像素，左侧为 900 像素，则它在 1100 像素处结束。

如果您现在的分辨率为 1000 像素，则可以将其向左移动（最大屏幕分辨率 - 框的宽度），然后向左移动 = (1000 像素 - 200 像素) = 800 像素。

于 2012-12-18T17:06:17.693 回答