HTML5拖放
拖放事件： 拖放元素事件： 放置元素事件：
拖放事件演示： 注意：
如何在拖动元素和放置元素间传递数据：Demo-实现将一个元素拖进另一个元素：
拖放简介：拖放是一种常见的特性，即抓取对象以后拖到另一个位置。 在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放（前提是加上draggable属性）。
学习目标：什么是拖放元素、什么是放置元素、拖放元素事件、放置元素事件、如何将被拖放元素拖进放置元素中
拖放事件：
拖放元素事件：
事件/属性解释
ondragstart / ondrag开始拖放时触发ondrag / drag元素拖放时触发ondragend / dragend用户完成元素拖动后触发
放置元素事件：
事件/属性解释
ondragenter / dragenter拖动元素进入放置元素内触发ondragover / dragover拖动元素在放置元素内拖动时触发ondragleave / dragleave拖动元素离开放置元素内触发ondrop / drop拖动过程中，释放鼠标键时触发
拖放事件演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖放
</title>
<style>
#mydiv{
width: 200px;
height: 200px;
background-color: orangered;
}
#container{
width: 500px;
height: 500px;
background-color: deepskyblue;
}
</style>
</head>
<body>
<div id="mydiv" draggable="true"></div>
<div id="container"></div>
<script>
var ele = document.getElementById("mydiv");
ele.ondragstart = function (ev) {
ev.dataTransfer.setData("Text",ev.target.id)
console.log("开始拖放")
}
ele.ondrag = function () {
console.log("正在拖放")
}
ele.ondragend = function () {
console.log("结束拖放")
}
var container = document.getElementById("container");
container.ondragenter = function () {
console.log("拖进去，未放置")
}
container.ondragover = function (ev) {
console.log("已经拖到被放置元素上方")
}
container.ondragleave = function (ev) {
console.log("离开放置元素")
}
container.ondrop = function (ev) {
console.log("放置被拖放数据")
}
</script>
</body>
</html>
注意：
默认情况下，元素不能在其他元素中被拖放，所以我们需要屏蔽浏览器默认事件，在 ondragover 和 ondrop 事件中进行处理
<script>
....
container.ondragover = function (ev) {
ev.preventDefault()
console.log("已经拖到被放置元素上方")
}
container.ondrop = function (ev) {
ev.preventDefault()
console.log("放置被拖放数据")
}
....
</script>
如何在拖动元素和放置元素间传递数据：
使用dataTransfer.setData()设置传递的数据 使用dataTransfer.getData()获取传递的数据
<script>
var ele = document.getElementById("mydiv");
ele.ondragstart = function (ev) {
ev.dataTransfer.setData("Text",ev.target.id)
console.log("开始拖放")
}
......
var container = document.getElementById("container");
......
container.ondrop = function (ev) {
ev.preventDefault()
var id = ev.dataTransfer.getData("Text")
ev.target.appendChild(document.getElementById(id))
console.log("放置被拖放数据")
}
document.body.ondragover = container.ondragover
document.body.ondrop = container.ondrop
</script>
Demo-实现将一个元素拖进另一个元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖放
</title>
<style>
#mydiv{
width: 200px;
height: 200px;
background-color: orangered;
}
#container{
width: 500px;
height: 500px;
background-color: deepskyblue;
}
</style>
</head>
<body>
<div id="mydiv" draggable="true"></div>
<div id="container"></div>
<script>
var ele = document.getElementById("mydiv");
ele.ondragstart = function (ev) {
ev.dataTransfer.setData("Text",ev.target.id)
console.log("开始拖放")
}
ele.ondrag = function () {
console.log("正在拖放")
}
ele.ondragend = function () {
console.log("结束拖放")
}
var container = document.getElementById("container");
container.ondragenter = function () {
console.log("拖进去，未放置")
}
container.ondragover = function (ev) {
ev.preventDefault()
console.log("已经拖到被放置元素上方")
}
container.ondragleave = function (ev) {
console.log("离开放置元素")
}
container.ondrop = function (ev) {
ev.preventDefault()
var id = ev.dataTransfer.getData("Text")
console.log(ev.target)
console.log(id)
ev.target.appendChild(document.getElementById(id))
console.log("放置被拖放数据")
}
document.body.ondragover = container.ondragover
document.body.ondrop = container.ondrop
</script>
</body>
</html>
