實現Div拖拽

2022-03-31 09:39:28 字數 455 閱讀 9969

直觀的理解div拖拽:當滑鼠對著可拖拽部分按住後並拖動,div會跟著滑鼠一起運動,並且其運動空間限制在瀏覽器內部,當放開滑鼠時,則div停止運動。

實現div拖拽需要三個重要的事件:

(1)onmousedown-滑鼠按下事件

(2)onmousemove-滑鼠移動事件

(3)onmouseup-滑鼠抬起事件

當滑鼠移出瀏覽器後再回到瀏覽器內部時,會丟失對div的控制,需要再次按下滑鼠移動div,為了改善這一小問題,**中使用了setcapture和releasecapture。

其中,setcapture方法是用於監視滑鼠操作事件,即使滑鼠移出瀏覽器照樣能夠捕捉到滑鼠位置,當滑鼠移回瀏覽器內部時,此時div依然跟隨著滑鼠移動;當然,releasecapture方法就是釋放對滑鼠操作事件的監視。

需要注意的重點是div的座標問題,當滑鼠按住div後移動,div要跟著滑鼠時時改變位置座標。

js實現可拖拽的div

doctype html html lang en head meta charset utf 8 title zzw drap title style box bar content style head body div id box div id bar 可拖拽頭部 div div id co...

vuejs 移動端 實現div拖拽移動

本文講述,在使用vue的移動端實現類似於iphone的懸浮窗的效果。touchstart 當在螢幕上按下手指時觸發 touchmove 當在螢幕上移動手指時觸發 touchend 當在螢幕上抬起手指時觸發 mousedown mousemove mouseup對應的是pc端的事件 touchcanc...

滑鼠拖拽div元素

上圖中綠色箭頭指向的分別是3個事件,大概的意思是 滑鼠單擊div box元素後,啟用了document.onmousemove滑鼠移動事件,在移動滑鼠時,會改變div box的left top值,從而達到div box元素隨著滑鼠移動。單滑鼠放開時觸發了document.onmouseup滑鼠鬆開事...