一真的小站

鳶飛魚躍,無處不是化境。

0%

九、拖拽接口

九、拖拽接口

样例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
<div class="div1" id="div1">
<p id="pe" draggable="true">拖拖</p>
</div>
<div class="div2" id="div2"></div>
<script>
var p = document.querySelector("#pe");
p.ondragstart = function() {
console.log("ondragstart");
}
p.ondragend = function() {
console.log("ondragend");
}
p.ondragleave = function() {
console.log("ondragleave");
}
p.ondrag = function() {
console.log("ondrag");
}
</script>
</body>
拖拽元素对象 定义
ondrag 应用于拖拽元素,整个拖拽过程都会调用
ondragstart 应用于拖拽元素,当拖拽开始时调用
ondragleave 应用于拖拽元素,当鼠标离开拖拽元素时调用
ondragend 应用于拖拽元素,当拖拽结束时调用
目标元素对象 定义
ondragenter 应用于目标元素,当拖拽元素进入时调用
ondragover 应用于目标元素,当停留在目标元素上时调用
ondrop 应用于目标元素,当在目标元素上松开鼠标时调用
ondragleave 应用于目标元素,当鼠标离开目标元素时调用