HTML页面拖放功能的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>drag & drop</title>
<style>
#div {
width: 200px;
height: 200px;
border: 1px solid gray;
}
</style>
</head>
<body>
<img src="./1.jpg" draggable="true" ondragstart="dragStart(event)">
<div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<script>
function dragStart(e) {
e.dataTransfer.setData("Text", "拖动传输的数据");
}
function drop(e) {
e.preventDefault();
var data = e.dataTransfer.getData("Text");
e.target.innerText = data
}
function allowDrop(e) {
e.preventDefault();
}
</script>
</body>
</html>
draggable
一个枚举属性，指示是否可以使用拖放API拖放元素。它可以有以下值:
true，表示该元素可以被拖动
false，表示该元素不能被拖动
ondragstart
用户开始拖动一个元素或文本选择。
e.dataTransfer.setData()方法设置被拖数据的数据类型和值
ondrop
1. 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
2. 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据
ondragover
1. ondragover 事件规定在何处放置被拖动的数据
2. 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法