案例内容
利用ondragstart、ondragover、ondrop属性，并编写相关代码，完成图片的拖放。
演示
学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小院里的霍大侠</title>
<!-- 拖放事件函数 -->
<script>
function allow(e) {
e.preventDefault();
}
function drag(e) {
e.dataTransfer.setData("Text",e.target.id);
}
function drop(e) {
e.preventDefault();
let data=e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<!-- 拖放事件的HTML元素 -->
<div>
<p>拖动图片放置到框中</p>
<p id="drop" ondrop="drop(event)" ondragover="allow(event)"></p>
<img id="drag" src="1.png" draggable="true" ondragstart="drag(event)" width="100" height="100">
</div>
</body>
<!-- CSS样式 -->
<style>
div
{
width: 500px;
height: 500px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 300px;
margin: auto;
}
#drop {width:100px;height:100px;padding:10px;border:1px solid #aaaaaa;}
</style>
</html>
总结思考
学习点：
1、draggable="true" ：元素可拖动
2、ondragstart ：规定当元素被拖动时，会发生什么
3、ondragover ：规定在何处放置被拖动的数据
4、ondrop ：进行放置
5、dataTransfer.setData() ：设置被拖数据的数据类型和值
6、preventDefault() ：阻止浏览器对元素的默认处理方式
7、dataTransfer.getData("Text") ：获得被拖的数据
拖放（Drag 和 drop）是 HTML5 标准的组成部分。可以使用拖放进行验证，识别人机。拖放可以使你的界面不再单调无趣。
关注我，跟着我每天学习一点点，让你不在枯燥，不在孤单..
全网可搜：小院里的霍大侠， 免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。
私微信：huodaxia_xfeater
二维码： www.yougexiaoyuan.com/images/weix…
公众号：有个小院（微信公众号：yougexiaoyuan）
github：yougexiaoyuan (视频源码免费获取)
（部分素材来源于互联网，如有保护请联系作者）
