js學習筆記29 拖拽

原理：先計算滑鼠與拖拽目標的左側距離 跟 上面距離，再計算拖動後的位置。

示例**：

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
title
>拖拽原理
title
>
5<
meta 
charset
="utf-8"
>
6<
meta 
name
="viewport"
content
="width=device-width, initial-scale=1"
>
7<
style 
type
="text/css"
>
8#moveblock
11style
>
12<
script
>
1314
window.onload 
=function
()26
27document.onmouseup 
=function
()3031}
32}3334
script
>
35head
>
36<
body
>
37<
div 
id="moveblock"
>
3839
div>
40body
>
41html
>

我們執行上面的**如果只是乙個單純的div沒什麼問題，但是如果同時有文字選中之後，再拖動div會發現有問題。

那是因為當滑鼠按下的時候，如果頁面中有文字被選中，那麼會觸發瀏覽器預設的文字拖拽效果。

解決方案：

標準：用return false;

阻止事件預設行為

非標準ie :用setcapture()

設定全域性捕獲,當我們給乙個元素設定全域性捕獲以後，那麼這個元素就會監聽後續發生的所有事情，當有事件發生的時候，就會被當前設定了全域性捕獲的元素所觸發。

setcapture()相容性：

ie : 有，並且有效果

ff : 有，但是沒效果

chorme : 沒有

具體**如下：

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
title
>拖拽改進版
title
>
5<
meta 
charset
="utf-8"
>
6<
meta 
name
="viewport"
content
="width=device-width, initial-scale=1"
>
7<
style 
type
="text/css"
>
8#moveblock
11style
>
12<
script
>
1314
window.onload 
=function
()24
25document.onmousemove 
=function
(ev)
3031
document.onmouseup 
=function
()37}38
39return
false
; //
阻止事件預設行為
4041}42
}4344script
>
45head
>
46<
body
>
47<
p>
48             原因：當滑鼠按下的時候，如果頁面中有文字被選中，那麼會觸發瀏覽器預設的文字拖拽效果。<
br>
49解決： 用return false; 阻止事件預設行為.50p
>
51<
div 
id="moveblock"
>
5253
div>
54body
>
55html
>

封裝成乙個拖拽函式：

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
title
>拖拽封裝
title
>
5<
meta 
charset
="utf-8"
>
6<
meta 
name
="viewport"
content
="width=device-width, initial-scale=1"
>
7<
style 
type
="text/css"
>
8#moveblock
11style
>
12<
script
>
1314
window.onload 
=function
()28
29document.onmousemove 
=function
(ev)
3435
document.onmouseup 
=function
()41}42
43return
false
; //
阻止事件預設行為
4445}46
}4748}
4950
script
>
51head
>
52<
body
>
53<
p>
54             原因：當滑鼠按下的時候，如果頁面中有文字被選中，那麼會觸發瀏覽器預設的文字拖拽效果。<
br>
55解決： 用return false; 阻止事件預設行為.56p
>
57<
div 
id="moveblock"
>
5859
div>
60body
>
61html
>

js學習筆記29 拖拽

原理 先計算滑鼠與拖拽目標的左側距離 跟 上面距離，再計算拖動後的位置。示例 1 doctype html 2 html lang en 3 head 4 title 拖拽原理 title 5 meta charset utf 8 6 meta name viewport content width...

js學習之實現拖拽效果

lang en charset utf 8 name viewport content width device width,initial scale 1.0 documenttitle html,body box style head class box div body html 拖拽思路 滑...

JS 拖拽事件

這裡寫的是乙個原生js實現拖拽的效果，首先 1 實現拖拽的三大事件，是要首先清楚的 onmousedown 滑鼠按下的時候 onmousemove 滑鼠移動的時候 onmouseup 滑鼠鬆開的時候 2 給目標元素加上onmousedown時間，記錄滑鼠按下的時候，滑鼠距離所在元素的位置 就是滑鼠距...