鍍金池/ 問(wèn)答/HTML/ 網(wǎng)上找了個(gè)js,進(jìn)行篡改了一下,想實(shí)現(xiàn)鼠標(biāo)在桌面按住拖動(dòng)的效果,但是寬高計(jì)算出現(xiàn)

網(wǎng)上找了個(gè)js,進(jìn)行篡改了一下,想實(shí)現(xiàn)鼠標(biāo)在桌面按住拖動(dòng)的效果,但是寬高計(jì)算出現(xiàn)了問(wèn)題。

使用Jquery來(lái)寫(xiě)的JavaScript,就是在鼠標(biāo)按下的時(shí)候創(chuàng)建個(gè)Div,鼠標(biāo)移動(dòng)之后根據(jù)鼠標(biāo)的位置改變Div的寬高,現(xiàn)在我是用鼠標(biāo)的坐標(biāo)來(lái)設(shè)置Div的寬高,X=width Y=height,當(dāng)然這個(gè)行不通,不知道怎么改算法了...

相關(guān)代碼:[JavaScript]

//------
var Mil = false;

function  Mi() {

    var NewDiv = document.createElement('div');
    document.body.appendChild(NewDiv);
    NewDiv.id = 'Move_div';
    //創(chuàng)建Div

    move_div = document.getElementById("Move_div");

    m_down_x = event.pageX;
    m_down_y = event.pageY;
    //獲取鼠標(biāo)按下時(shí)坐標(biāo)

    //把鼠標(biāo)坐標(biāo)值賦給div對(duì)象
    move_div.style.left = m_down_x + "px";
    move_div.style.top = m_down_y + "px";

    Mil = true;
}
function move(){
        if(Mil){
            move_i = document.getElementById("Move_i");

            //獲取鼠標(biāo)移動(dòng)實(shí)時(shí)坐標(biāo)
            m_move_x = event.pageX;
            m_move_y = event.pageY;


            //把新div坐標(biāo)值賦給div對(duì)象
            move_div.style.width = m_move_x+"px";
            move_div.style.height = m_move_y+"px";

        }

}

//鼠標(biāo)釋放
function up(){
    Mil = false;
    document.body.removeChild(document.getElementById("Move_div"));
}

[Html]

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

[Css]

#Move_div{
    min-height:1px;
    min-width: 1px;
    border: 1px dashed #fff;
    position: fixed;
}

相關(guān)鏈接:
https://blog.lfio.net/

相關(guān)截圖:

clipboard.png

回答
編輯回答
編輯回答
不討喜
function move(){
        if(Mil){
            move_i = document.getElementById("Move_i");

            //獲取鼠標(biāo)移動(dòng)實(shí)時(shí)坐標(biāo)
            m_move_x = event.pageX;
            m_move_y = event.pageY;


            //把新div坐標(biāo)值賦給div對(duì)象
            move_div.style.width = m_move_x+"px";
            move_div.style.height = m_move_y+"px";

        }

}

這里的寬高應(yīng)該再減去Move_div的left top
比如這樣

            move_div = document.getElementById("Move_div");
            //把新div坐標(biāo)值賦給div對(duì)象
            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";
2017年3月28日 20:30