在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

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

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

下面是已經(jīng)寫好的JS,有大佬看下怎么改進,才能實現(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;
}

相關地址:
https://blog.lfio.net/

回答
編輯回答
別瞎鬧

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

2018年1月12日 06:17