鍍金池/ 問答/HTML/ 通過JS模擬Win10桌面的拖拉框選，只實(shí)現(xiàn)了一個(gè)方向的框選，如何實(shí)現(xiàn)多方向的框

通過JS模擬Win10桌面的拖拉框選，只實(shí)現(xiàn)了一個(gè)方向的框選，如何實(shí)現(xiàn)多方向的框選呢

如題，目前只能往右下角拖拉，而不能往其他方向拉，我想實(shí)現(xiàn)Win10桌面一模一樣的拖拉，不知道算法改怎么寫了。

下面是已經(jīng)寫好的JS，有大佬看下怎么改進(jìn)，才能實(shí)現(xiàn)和Win10桌面一樣的拖拉呢

[JavaScript]

var Mil = false;
var NewDiv = document.createElement('div');

function getMousePos(event) {
    var e = event || window.event;
    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    var x = e.pageX || e.clientX + scrollX;
    var y = e.pageY || e.clientY + scrollY;
    return { 'x': x, 'y': y };
}
function  Mi(e) {
    document.body.appendChild(NewDiv);
    NewDiv.id = 'Move_div';
    move_div = document.getElementById("Move_div");
    var m_down_x = getMousePos(e).x;
    var m_down_y= getMousePos(e).y;
    move_div.style.left = m_down_x + "px";
    move_div.style.top = m_down_y + "px";
    move_div.style.width = m_down_x - parseInt(move_div.style.left) +"px";
    move_div.style.height = m_down_y - parseInt(move_div.style.top) +"px";
    Mil = true;

}
function move(e){
    if(Mil){
        move_div = document.getElementById("Move_div");
        var m_move_x = getMousePos(e).x;
        var m_move_y= getMousePos(e).y;
        move_div.style.width = m_move_x - parseInt(move_div.style.left) +"px";
        move_div.style.height = m_move_y - parseInt(move_div.style.top) +"px";
    }
}
function up(){
    Mil = false;
    document.body.removeChild(document.getElementById("Move_div"));
}

[Html]

<body  onmousemove="move(event)" onmouseup="up()" onmousedown="Mi(event)">

[Css]

#Move_div{
    background-color: rgba(162, 204, 242, 0.35);
    box-shadow: 0 0px 0.1px 0 rgba(255, 255, 255, 0.88);
    position: fixed;
}

相關(guān)地址：
https://blog.lfio.net/

回答
編輯回答
別瞎鬧

以mousedown時(shí)鼠標(biāo)的位置為原點(diǎn)想象一個(gè)直角坐標(biāo)系 判斷一下鼠標(biāo)移動(dòng)時(shí)處于哪個(gè)象限 根據(jù)不同的象限計(jì)算move_div的top left width height 你已經(jīng)完成了第四象限的計(jì)算方式 還差三個(gè)象限

2018年1月12日 06:17