//感觉拖拽挺有意思，刚开始玩，简单总结一下，有什么不对的地方欢迎指正，谢谢 后续继续更新
<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>Title</title>
???<style>
???????.square{
???????????width: 200px;
???????????height: 200px;
???????????background: #079cda;
???????}
???????#box,#box2{
???????????width: 300px;
???????????height: 300px;
???????????border: 1px solid red;
???????????display: inline-block;
???????}
???</style>
</head>
<body>
???<div id="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <!--盒子1-->
???<div id="box2" ondrop="drop(event)" ondragover="allowDrop(event)"></div><!--盒子2-->
???<div id="figrue" draggable="true" ondragstart="drag(event)" class="square"></div> <!--图形-->
</body>
<script>
???function allowDrop(ev)
???{
???????ev.preventDefault(); //阻止默认事件
???}
???function drag(ev)
???{
???????ev.dataTransfer.setData("Text",ev.target.id); //获得要拖的图形的id ?并保持
???}
???function drop(ev)
???{
???????ev.preventDefault();
???????var data=ev.dataTransfer.getData("Text"); //得到数据
???????ev.target.appendChild(document.getElementById(data)); //把数据添加到节点
???}
???//总结： ondragstart 开始拖事件 ??ondrop 把拖的元素添加到节点 ?ondragover阻止默认事件
</script>
</html>
HTML5 拖拽简单总结
原文地址：https://www.cnblogs.com/zou1234/p/8320185.html