js學習筆記29 拖拽

2021-09-07 13:41:54 字數 3655 閱讀 1566

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

示例**:

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時間,記錄滑鼠按下的時候,滑鼠距離所在元素的位置 就是滑鼠距...