js代碼實現拖拽


很簡單的思路,通過三個鼠標事件:點擊、移動、抬起,只要計算出當前位置即可,如果是圖片的話加入:e.preventDefault();即可

//獲取元素
var dv = document.getElementById('dv');
var x = 0;
var y = 0;
var l = 0;
var t = 0;
var isDown = false;
//鼠標按下事件
dv.onmousedown = function(e) {
    //獲取x坐標和y坐標
    x = e.clientX;
    y = e.clientY;

    //獲取左部和頂部的偏移量
    l = dv.offsetLeft;
    t = dv.offsetTop;
    //開關打開
    isDown = true;
    //設置樣式  
    dv.style.cursor = 'move';
}
//鼠標移動
window.onmousemove = function(e) {
    if (isDown == false) {
        return;
    }
    //獲取x和y
    var nx = e.clientX;
    var ny = e.clientY;
    //計算移動后的左偏移量和頂部的偏移量
    var nl = nx - (x - l);
    var nt = ny - (y - t);

    dv.style.left = nl + 'px';
    dv.style.top = nt + 'px';
}
//鼠標抬起事件
dv.onmouseup = function() {
    //開關關閉
    isDown = false;
    dv.style.cursor = 'default';
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM