- 步骤
- 想要将拖放的对象元素的draggable属性设为true(draggable="true").这样才能将元素进行拖放。另外，img元素与a元素(必须指定href)默认允许拖放
- 编写与拖放有关的处理代码
- 拖放的相关事件
|事件| 产生事件的元素|描述|
|:------:|:-----:|:------:|
|dragstart|被拖放的元素|开始拖放操作|
|drag|被拖放的元素|拖放过程中|
|dragenter|拖放过程中鼠标经过的元素|被拖放的元素开始进入本元素的范围内|
|dragover|拖放过程中鼠标经过的元素|被拖放的元素正在本元素的范围内移动|
|dragleave|拖放过程中鼠标经过的元素|被拖放的元素离开了本元素的范围|
|drop|拖放的目标元素|有其他元素呗拖放到本元素中|
|dragend|拖放的对象元素|拖放操作结束|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>拖拽事件</title>
<script>
function init() {
var source = document.getElementById('dragme')
var dest = document.getElementById("text")
// （1）监听开始拖放事件
source.addEventListener('dragstart', function(ev) {
//向dataTransfar对象追加数据
// dataTransfar对象专门用来存放拖放时要携带的数据，可以被设置为拖动事件的dataTransfer属性
var dt = ev.dataTransfer
dt.effectAllowed = "all"
// （2）拖动元素
dt.setData("text/plain", "哈喽")
}, false)
// (3)dragend:拖放结束
dest.addEventListener('dragend', function(ev) {
// 阻止默认事件提交
ev.preventDefault()
}, false)
//(4)drop:被拖放
dest.addEventListener("drop", function(ev) {
var dt = ev.dataTransfer
var text = dt.getData("text/plain")
dest.textContent += text
// （5）不执行默认处理（拒绝被拖放）
ev.preventDefault()
// 停止事件传播
ev.stopPropagation()
}, false)
}
// (6)设置页面属性，不执行默认处理(拒绝呗拖放)
document.ondragover = function(e) {
e.preventDefault()
}
document.ondrop = function(e) {
e.preventDefault()
}
</script>
</head>
<body onload="init()">
<h1>简单拖放实例</h1>
<div id="dragme" draggable="true" style="width:200px;border:1px solid gray">请拖放</div>
<div id="text" style="width:200px;height:200px;border:1px solid gray"></div>
</body>
</html>
- 案例中所需要的属性
- <a href="">dataTransfer</a>
- <a href="">setData</a>
网友评论