很簡單的思路,通過三個鼠標事件:點擊、移動、抬起,只要計算出當前位置即可,如果是圖片的話加入: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'; }