0

ユーザーがdivボックスをドラッグして、そのスタイルでデータベースを更新できるようにする機能を作成しようとしています。これにより、ユーザーがページに戻ったときに、位置を記憶し、ボックスを適切な場所に配置します（親divに対して） ）。

私は現在これを機能させていますが、ユーザーがたとえば1600pxの画面幅を使用してボックスを配置し、iPadまたはたとえば1000pxの小さい画面サイズでページを開くと、ボックスが親の境界線。

親の内部に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

ページを開くときに現在の解像度を確認するだけです。

表示領域の外に配置されたボックスのいずれかを左に移動します。

ボックスの左位置とボックスの幅を使用して確認してください。

たとえば、ボックスの幅が200ピクセルで、左が900ピクセルの場合、1100ピクセルで終了します。

現在1000pxの解像度になっている場合は、（最大画面解像度-ボックスの幅）の左側に移動してから、左=（1000px-200px）=800pxに移動できます。

于 2012-12-18T17:06:17.693 に答える