Javascript 更改页面大小时动态重新计算选择框的鼠标位置我有一个脚本在网格上绘制一个选择框（只是一个.png图像），但是我有一个错误，选择框绘制在错误的位置。_Javascript_Jquery_Html_Css

Javascript 更改页面大小时动态重新计算选择框的鼠标位置我有一个脚本在网格上绘制一个选择框（只是一个.png图像），但是我有一个错误，选择框绘制在错误的位置。

javascript jquery html css

Javascript 更改页面大小时动态重新计算选择框的鼠标位置我有一个脚本在网格上绘制一个选择框（只是一个.png图像），但是我有一个错误，选择框绘制在错误的位置。,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我认为这是因为mousedown位置使用的脚本计算页面加载的顶部和左侧。如果在创建选择框之前调整了页面的大小，则该页面将使用“顶部”和“左侧”的原始计算，因此位置不正确有没有一种方法可以在不完全破坏我的脚本的情况下解决这个问题下面是与.zip和JSFIDLE一起使用的代码，感谢您的帮助 CSS: HTML: 我需要帮助的其他事项：另一个小错误是，当选择“向左”和“顶部”时，长方体围绕左上角而不是右下角旋转（请尝试从右下角的正方形中选择整个栅格）。我认为这与在css中的math.ab

我认为这是因为mousedown位置使用的脚本计算页面加载的顶部和左侧。如果在创建选择框之前调整了页面的大小，则该页面将使用“顶部”和“左侧”的原始计算，因此位置不正确

有没有一种方法可以在不完全破坏我的脚本的情况下解决这个问题

下面是与.zip和JSFIDLE一起使用的代码，感谢您的帮助

CSS:

HTML:

我需要帮助的其他事项：

另一个小错误是，当选择“向左”和“顶部”时，长方体围绕左上角而不是右下角旋转（请尝试从右下角的正方形中选择整个栅格）。
- 我认为这与在css中的math.abs周围放一个if语句并从两边减去10px有关。。。但我没办法解决
此外，在未来，我希望能够为用户上传一个图像，并有它显示在选择框（动态变化的大小）它应该可以通过改变选择框的css。。。不过，我可能会就此提出另一个问题

一行就可以解决您在调整大小方面的选择问题：

$(window).resize(function(){gridOffset = $('#board').offset();})

A.用户经常在选择过程中间调整大小吗？如果是这样，则鼠标可能已经执行了调整大小，并且不再处于调整大小之前的位置。2.可以将定位绑定到调整大小事件。我注意到在测试期间，人们倾向于在使窗口全屏显示之前加载页面，这是我第一次偶然发现这个bug时

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

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

});

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

$(window).resize(function(){gridOffset = $('#board').offset();})