需求：
用户选中一个可拖拽的（draggable） 元素，并将其拖拽（鼠标不放开）到一个可放置的（droppable） 元素，然后释放鼠标。
ondragstart| 当用户开始拖拽一个元素或选中的文本时触发
ondragover | 当元素或选中的文本被拖到一个可释放目标上时触发（每100毫秒触发一次）。
ondrop | 当元素或选中的文本在可释放目标上被释放时触发
在HTML5标准中， draggable是一个全局的枚举属性，它决定了一个元素是否可以被拖动。 draggable 的语法：
true： 可以拖动；
false：禁止拖动
auto：跟随浏览器定义元素是否可以拖动
在web页面中，默认只有text selection,images,links（选中文本、图片、链接）可以被拖动，当一个image或link被拖动时，image或link的url会被设置到drag data中。对于其他元素，必须是selection的一部分才能被拖动。要想所有的元素都能被拖动，需要做三件事情：
1、设置draggable=“true”到元素上。
2、添加dragstart事件监听。
3、在dragstart事件中设置drag data.(通过dataTransfer对象实现)。
<!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>Document</title>
<style>
.droptarget{
float: left;
width: 100px;
height: 100px;
line-height: 100px;
margin:15px 15px 0 0 ;
border: 1px solid #aaaaaa;
text-align: center;
cursor:pointer;
}
p{
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 拖动流程 -->
<!-- 1. 选中 => 拖动 => 释放
onmousedown：鼠标点下事件
onmousemove：鼠标移动事件
onmouseup：鼠标放开事件 -->
<p>在两个div来回切换</p>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
<p id="dragtarget" ondragstart = "dragStart(event)" draggable="true">拖动我</p>
</div>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<script>
function dragStart(event) {
console.log(event);
// event.dataTransfer.setData("text/plain",event.target.id)//存被拖拽元素id id ="dragtarget"
event.dataTransfer.setData("text/html",event.target.id); //存被拖拽元素id
}
function drop(event){//当元素拖拽到此元素松开鼠标时触发
event.preventDefault();
const data = event.dataTransfer.getData("text/plain");
// const data = event.dataTransfer.getData("text/html");
event.target.appendChild(document.getElementById(data))
}
function allowDrop(event){//当元素拖拽到此元素停留时触发
event.preventDefault()
}
</script>
</body>
</html>
