lang
="en"
>
>
charset
="utf-8"
>
>
titletitle
>
>
body, html
#container
.item
style
>
head
>
"body"
>
"container"
>
class
="item"
>
div>
div>
>
//需要調整尺寸的div
let c = document.
getelementbyid
('container'
)// body監聽移動事件
document.
getelementbyid
('body').
addeventlistener
('mousemove'
, move)
// 滑鼠按下事件
c.addeventlistener
('mousedown'
, down)
// 滑鼠鬆開事件
document.
getelementbyid
('body').
addeventlistener
('mouseup'
, up)
// 是否開啟尺寸修改
let resizeable =
false
// 滑鼠按下時的座標，並在修改尺寸時儲存上乙個滑鼠的位置
let clientx, clienty
// div可修改的最小寬高
let minw =
8, minh =
8// 滑鼠按下時的位置，使用n、s、w、e表示
let direc =
''// 滑鼠鬆開時結束尺寸修改
functionup(
)// 滑鼠按下時開啟尺寸修改
function
down
(e)}
// 滑鼠移動事件
function
move
(e)// 滑鼠按下的位置在上部，修改高度
if(direc.
indexof
('n'
)!==-1
)// 滑鼠按下的位置在底部，修改高度
if(direc.
indexof
('s'
)!==-1
)// 滑鼠按下的位置在左邊，修改寬度
if(direc.
indexof
('w'
)!==-1
)}}// 獲取滑鼠所在div的位置
function
getdirection
(ev)
script
>
body
>
html
>
lang
="en"
>
>
charset
="utf-8"
>
>
titletitle
>
>
body, html
#container
.point
#container:hover .point
.top
.bottom
.left
.right
.top-left
.bottom-left
.top-right
.bottom-right
.item
style
>
head
>
"body"
>
"container"
>
class
="item"
>
div>
class
="point top"
>
div>
class
="point left"
>
div>
class
="point right"
>
div>
class
="point bottom"
>
div>
class
="point top-left"
>
div>
class
="point top-right"
>
div>
class
="point bottom-left"
>
div>
class
="point bottom-right"
>
div>
div>
>
//需要調整尺寸的div
let c = document.
getelementbyid
('container'
)// body監聽移動事件
document.
getelementbyid
('body').
addeventlistener
('mousemove'
, move)
// 滑鼠按下事件
c.addeventlistener
('mousedown'
, down)
// 滑鼠鬆開事件
document.
getelementbyid
('body').
addeventlistener
('mouseup'
, up)
// 是否開啟尺寸修改
let resizeable =
false
// 滑鼠按下時的座標，並在修改尺寸時儲存上乙個滑鼠的位置
let clientx, clienty
// div可修改的最小寬高
let minw =
8, minh =
8// 滑鼠按下時的位置，使用n、s、w、e表示
let direc =
''// 滑鼠鬆開時結束尺寸修改
functionup(
)// 滑鼠按下時開啟尺寸修改
function
down
(e)}
// 滑鼠移動事件
function
move
(e)// 滑鼠按下的位置在上部，修改高度
if(direc.
indexof
('n'
)!==-1
)// 滑鼠按下的位置在底部，修改高度
if(direc.
indexof
('s'
)!==-1
)// 滑鼠按下的位置在左邊，修改寬度
if(direc.
indexof
('w'
)!==-1
)}}// 獲取滑鼠所在div的位置
function
getdirection
(ev)
script
>
body
>
html
>
滑鼠拖拽div元素
上圖中綠色箭頭指向的分別是3個事件，大概的意思是 滑鼠單擊div box元素後，啟用了document.onmousemove滑鼠移動事件，在移動滑鼠時，會改變div box的left top值，從而達到div box元素隨著滑鼠移動。單滑鼠放開時觸發了document.onmouseup滑鼠鬆開事...
滑鼠拖拽改變物件的屬性，滑鼠拖拽DIV移動
常用document.onmousemove做的一些事情 the time of writing 2013 4 11 written by 吳志強 window.onload function else mousemove odiv1,left top ev,function 滑鼠拖動時執行函式 f...
實現Div拖拽
直觀的理解div拖拽 當滑鼠對著可拖拽部分按住後並拖動，div會跟著滑鼠一起運動，並且其運動空間限制在瀏覽器內部，當放開滑鼠時，則div停止運動。實現div拖拽需要三個重要的事件 1 onmousedown 滑鼠按下事件 2 onmousemove 滑鼠移動事件 3 onmouseup 滑鼠抬起事件...