2

グリッド上に選択ボックスを描画するスクリプト (.png 画像のみ) がありますが、選択ボックスが間違った場所に描画されるというエラーが発生します。

マウスダウン位置が使用するスクリプトがページ読み込み時に上下を計算するためだと思います。選択ボックスを作成する前にページのサイズを変更すると、元の上部と左側の計算が使用されるため、正しい位置に配置されません。

スクリプトを完全に荒らすことなく、この問題を解決する方法はありますか?

以下は、.zip および jsFiddle と共に使用されるコードです。ご協力ありがとうございます。

jsフィドル

。ジップ

CSS:

  body{
    background-color: #3AB3F0;
  }

  #board-background{
    width: 1000px;
    height: 1000px;
    padding: 25px 25px 25px 25px;
    margin: 25px auto 25px;
    position: relative;
    background: url(https://abs.twimg.com/a/1366134123/t1/img/wash-white-30.png);
    border: 0px solid #e5e5e5;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
  }

  #board {
    position: absolute;
    background-color: #FFF;
    z-index: 1;
    width: 1000px;
    height: 1000px;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
  }

  #board img {
    position: absolute;
    z-index: 2;
    user-drag: none;
    -moz-user-select: none; 
    -webkit-user-drag: none;
  }

  #selectionBox {
      position: absolute;
      z-index: 3;
      display: none;
      background-color: red;
      min-width: 0px;
      min-height: 0px;
      width: 10px;
      height: 10px;
      opacity: 0.8;
  }

HTML:

    <html>

        <head>

            <link href="css/test.css" rel="stylesheet">
            <script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
            <script type="text/javascript" src="js/board_script.js"></script>

        </head>

        <body>

        </body>

    </html>

JS:

// GRID CREATION SCRIPT //
// -------------------- //


function creategrid(){

//Outside background for the board   
    var BoardBackground = document.createElement('div');
    BoardBackground.id = 'board-background';
    BoardBackground.class = 'board-background';
    document.body.appendChild(BoardBackground);

    //Generated image
    var Board = document.createElement("div");
    Board.id = 'board';
    Board.className = 'board';
    BoardBackground.appendChild(Board);

    //grid image
    var grid = document.createElement("img");
    grid.id = 'grid';
    grid.className = 'grid';
    grid.src = "media/grid.png";
    Board.appendChild(grid);

}


// Selection Box Script //
// -------------------- //


var isDragging = false,
    dragStart,
    cellSpacing = 10,
    gridOffset,
    selectionBox;

function getMousePos (e) {
    return {
        'left': Math.floor((e.pageX - gridOffset.left) / cellSpacing) * cellSpacing .toFixed( 0 ),
        'top': Math.floor((e.pageY - gridOffset.top) / cellSpacing) * cellSpacing .toFixed( 0 )
    };
};

$(document).ready(function(){
    creategrid(10);
    gridOffset = $('#board').offset();
    selectionBox = $('<div>').attr({id: 'selectionBox'})
      .appendTo($('#board'));

    $('#board').on('mousedown', function(e){
        isDragging = true;

        var pos = getMousePos(e);
        dragStart = pos;

        selectionBox.css({
            left: pos.left,
            top: pos.top,
            width: 10,
            height: 10
        }).show();

    });

    $('#board').on('mousemove', function(e){
        if(!isDragging)
            return false;

        var pos = getMousePos(e);
        var diff = {
            'left': pos.left - dragStart.left,
            'top': pos.top - dragStart.top
        };

        selectionBox.css({
            left: Math.min(pos.left, dragStart.left),
            top: Math.min(pos.top, dragStart.top),
            width: Math.abs(diff.left),
            height: Math.abs(diff.top)
        });

    });

        $('#board').on('mouseup', function(e){
        isDragging = false;
    });

});

メディア: (3 つ目のリンクを投稿するには 10 人の担当者が必要なので、ここにプレーンテキストと「コード」を示します)

oi43.tinypic.com/33opjtd.jpg

[grid.png](http://oi43.tinypic.com/33opjtd.jpg "grid lined image with transparent background")

他にサポートが必要なこと:

  • もう 1 つの小さなエラーは、左と上を選択すると、ボックスが右下ではなく左上隅を中心に回転することです (右下の正方形からグリッド全体を選択してみてください)。
    • これは、css の math.abs の周りに if ステートメントを配置し、両側から 10px を減算することと関係があると思います...しかし、うまくいきません
  • また、将来的には、ユーザーが画像をアップロードして、選択ボックスの上に表示できるようにしたい (サイズが動的に変化する) 選択ボックスの css を変更することで可能になるはずです... 別のそれについての質問です。
4

1 に答える 1

2

resize に関する選択の問題は、1 行で解決できます。

$(window).resize(function(){gridOffset = $('#board').offset();})
于 2013-05-06T18:35:54.280 に答える