在 HTML5 中，任何元素都能够被拖放
要使得一个元素是可拖动的，必须将它的 draggable 属性设置为 true
<div draggable="true">我是可以被拖动的</div>
在拖动元素的过程中，会触发相关的事件，与源对象（被拖动元素）相关的事件如下：
ondragstart：开始拖动元素时触发ondrag：元素正在拖动时触发ondragend：完成元素拖动后触发
<!DOCTYPE html>
<html>
<head>
<title>Drag Demo</title>
<head>
<style>
#source-object {
50px;
height: 50px;
border: 1px solid red;
background-color: red;
}
</style>
<script>
function dragstart(event) { console.log('dragstart') }
function drag(event) { console.log('drag') }
function dragend(event) { console.log('dragend') }
</script>
</head>
</head>
<body>
<div id="source-object"
draggable="true"
ondragstart="dragstart(event)"
ondrag="drag(event)"
ondragend="dragend(event)" >
</div>
</body>
</html>
另外，我们还能监听在元素释放时触发的事件，与目标对象（其实就是释放区域）相关的事件如下：
ondragenter：当被拖动元素进入释放区域时触发ondragover：当被拖动元素在释放区域移动时触发ondragleave：当被拖动元素离开释放区域时触发ondrop：当被拖动元素在释放区域释放时触发
<!DOCTYPE html>
<html>
<head>
<title>Drop Demo</title>
<head>
<style>
#source-object {
50px;
height: 50px;
border: 1px solid red;
background-color: red;
}
#target-object {
100px;
height: 100px;
border: 1px solid blue;
background-color: blue;
}
</style>
<script>
function dragenter(event) { console.log('dragenter') }
function dragover(event) {
// dragover 事件的默认行为是阻止数据或元素放置到其他元素中
// 如果想要避免这种情况，就必须阻止 dragover 的默认行为
// 只有这样，才能触发 drop 事件
event.preventDefault()
console.log('dragover')
}
function dragleave(event) { console.log('dragleave') }
function drop(event) {
// 对于图片等元素，drop 事件的默认行为是以链接的形式打开
// 如果想要避免这种情况，就必须阻止 drop 的默认行为
event.preventDefault()
console.log('drop')
}
</script>
</head>
</head>
<body>
<div>请将红色方框移入蓝色方框</div>
<br />
<div id="source-object" draggable="true"></div>
<br />
<div id="target-object"
ondragenter="dragenter(event)"
ondragover="dragover(event)"
ondragleave="dragleave(event)"
ondrop="drop(event)" >
</div>
</body>
</html>
拖放事件还有一个新的属性 dataTransfer，用于在源对象和目标对象之间传递数据
dataTransfer 它是一个对象，常用的方法有两个：
setData(key, value)：在源对象设置数据getData(key)：在目标对象获取数据
<!DOCTYPE html>
<html>
<head>
<title>Drag And Drop Demo</title>
<head>
<style>
#source-object {
50px;
height: 50px;
border: 1px solid red;
background-color: red;
}
#target-object {
100px;
height: 100px;
border: 1px solid blue;
background-color: blue;
}
</style>
<script>
// 源对象事件
function dragstart(event) {
event.dataTransfer.setData('elemId', event.target.id)
}
// 目标对象事件
function dragover(event) {
event.preventDefault()
}
function drop(event) {
event.preventDefault()
var elemId = event.dataTransfer.getData('elemId')
var elem = document.getElementById(elemId)
event.target.appendChild(elem)
}
</script>
</head>
</head>
<body>
<div>请将红色方框移入蓝色方框</div>
<br />
<div id="source-object"
draggable="true"
ondragstart="dragstart(event)" >
</div>
<br />
<div id="target-object"
ondragover="dragover(event)"
ondrop="drop(event)">
</div>
</body>
</html>
最后来一个拖放在实际应用中的例子，实现文件拖拽上传功能
<!DOCTYPE html>
<html>
<head>
<title>Drag And Drop Demo</title>
<head>
<style>
#file-input {
300px;
height: 100px;
border-radius: 50px;
border: 1px dashed black;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
</style>
<script>
window.onload = function() {
var fileInput = document.getElementById('file-input')
fileInput.ondragover = function(event) {
event.preventDefault()
}
fileInput.ondrop = function(event) {
event.preventDefault()
// 每次只获取第一个文件对象
var file = event.dataTransfer.files[0]
// 检查
let isRightType = checkFileType(file)
let isRightSize = checkFileSize(file)
// 提示
if (isRightType && isRightSize) {
alert('上传文件成功')
} else if (!isRightType) {
alert('只支持 DOCX、TXT、MD 文件格式')
} else if (!isRightSize) {
alert('文件不能大于 2 M')
}
}
function checkFileType(file) {
let allowedTypes = ['DOCX', 'TXT', 'MD']
let fileInfo = file.name.split('.')
let fileType = fileInfo[fileInfo.length - 1].toUpperCase()
return allowedTypes.includes(fileType)
}
function checkFileSize(file) {
let maxSize = 2 * 1024 * 1024
let fileSize = file.size
return fileSize <= maxSize
}
}
</script>
</head>
</head>
<body>
<div id="file-input">请将文件拖动到此处</div>
</body>
</html>
【 阅读更多 HTML 系列文章，请看 HTML学习笔记 】