2. 拖动事件

拖放事件
  拖元素
    dragstart: 当一个元素开始被拖拽的时候触发
    drag: 这个事件在拖拽源触发
    dragend: 拖拽源在拖拽操作结束将得到dragend事件对象，不管操作成功与否；
 
  放元素
    dragenter: 当拖拽中的鼠标第一次进入一个元素的时候触发；
    dragover: 当拖拽中的鼠标移动经过一个元素的时候触发；
    dragleave: 当拖拽中的鼠标离开元素时触发；
    drop: 这个事件在拖拽操作结束释放元素上触发

注意：在拖拽的时候只会触发拖拽的相关事件，鼠标事件，例如：mousemove,是不会触发的；

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>拖动</title>
 8     <style>
 9         #mydiv {
10             width: 200px;
11             height: 200px;
12             background-color: blue;
13         }
14         
15         #container {
16             width: 600px;
17             height: 600px;
18             background-color: skyblue;
19         }
20     </style>
21 </head>
22 <body>
23 
24     
25     <div id="mydiv" draggable="true"></div>
26     
27     <div id="container"></div>
28     <script>
29         const mydiv = document.getElementById('mydiv')
30         
31         // 拖事件，开始
32         function onDragstart(ev) {
33             console.log('开始拖')
34         }
35         mydiv.addEventListener('dragstart', onDragstart)
36         
37         // 拖事件，正在，一直触发
38         function onDrag(ev) {
39             // console.log('正在拖')
40         }
41         mydiv.addEventListener('drag', onDrag)
42         
43         // 拖事件，正在，一直触发
44         function onDragEnd(ev) {
45             console.log('结束拖')
46             ev.preventDefault()
47         }
48         mydiv.addEventListener('dragend', onDragEnd)
49         
50         
51         // 放元素
52         const container = document.getElementById('container')
53         
54         // 放事件，进入了
55         function onDragenter(ev) {
56             console.log('放入了')
57         }
58         container.addEventListener('dragenter', onDragenter)
59         
60         // 放事件，放在上面，持续的触发
61         function onDragover(ev) {
62             console.log('放上了')
63             // ev.stopPropagation()
64             ev.preventDefault()
65         }
66         container.addEventListener('dragover', onDragover)
67         
68         // 放事件，出去了
69         function onDragleave(ev) {
70             console.log('出去了')
71         }
72         container.addEventListener('dragleave', onDragleave)
73         
74         // 放事件，放下了
75         function onDrop(ev) {
76             console.log('放下了')
77         }
78         container.addEventListener('drop', onDrop)
79     </script>
80 </body>
81 </html>

 

posted @ 2023-01-10 11:21  sky-su  阅读(199)  评论(0)    收藏  举报