思路：
**如下：
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
滑鼠拖動繪製矩形區域title
>
>
.draw-box
style
>
head
>
>
class
="draw-box"
id="drawarear"
>
div>
>
initdrawreact
('drawarear'
,(ops)
=>
)function
initdrawreact
(id, fn)
;// 標記起點
var endpoint =
;// 標記終點
drawreact.style.display =
'block'
;// 進入畫布按下滑鼠顯示預設矩形框
// 滑鼠按下的位置作為矩形框的起點，橫縱座標記為 x0, y0
beginpoint =
// 起點的橫座標
var x0 = $event.clientx - areainfo.x;
// 起點的縱座標
var y0 = $event.clienty - areainfo.y;
// 繫結滑鼠事件--onmousemove
document.
onmousemove
=function
($event);}
else
if(x1 < x0 && y1 < y0);}
else
if(x1 < x0 && y1 >= y0);}
else
if(x1 >= x0 && y1 >= y0);}
drawreact.style.width = reactwidth +
'px'
;// 寬
drawreact.style.height = reactheight +
'px'
;// 高
drawreact.style.top = reacttop +
'px'
; drawreact.style.left = reactleft +
'px';}
// 繫結滑鼠事件--onmousedown
document.
onmouseup
=function
($event)
fn(options)}}
}script
>
body
>
html
>
js實現滑鼠繪製層拖拽特效
首先非常感謝濤濤的無私分享，此作品是一款他今天剛寫的原創js實現滑鼠繪製層拖拽功能，暫時只實現了滑鼠繪製圖層功能，拖拽功能還沒加上，是他在藍色理想看見有這樣乙個特效,沒有用jquery 來寫的，是利用js物件導向簡單模仿實現的，此作品主要是提供給們學習用。如下 01functiondragdrwa ...
原生js實現拖拽盒子
盒子必須是絕對定位的盒子 滑鼠在盒子內部按下時獲得相對座標。事件物件在頁面的位置減去盒子距離body的距離 滑鼠移動時，使得盒子的位置發生變化 滑鼠鬆開時，不再拖動 移動事件失效 lang zh charset utf 8 name viewport content width device wid...
js實現滑鼠拖拽效果
拖拽狀態 0 滑鼠在元素上按下的時候 滑鼠在元素上移動的時候 滑鼠在任何時候放開的時候 將以上思路翻譯成js 就可以實現拖拽的效果了。上面這個原理也可以演變為 拖拽原理2 拖拽狀態 0 滑鼠在元素上按下的時候 滑鼠在元素上移動的時候 滑鼠在任何時候放開的時候 將以上思路翻譯成js 就可以實現拖拽的效...