歡迎來的我的小院，恭喜你今天又要漲知識了！
案例內(nèi)容
利用ondragstart、ondragover、ondrop屬性，并編寫相關(guān)代碼，完成圖片的拖放。
演示
學(xué)習(xí)
<!DOCTYPE html>
<html lang="en">
? <head>
? ? <meta charset="UTF-8">
? ? <title>小院里的霍大俠</title>
? ? <!-- 拖放事件函數(shù) -->
? ? <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>拖動(dòng)圖片放置到框中</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>
總結(jié)思考
學(xué)習(xí)點(diǎn)：
1、draggable="true" ：元素可拖動(dòng)
2、ondragstart ：規(guī)定當(dāng)元素被拖動(dòng)時(shí)，會(huì)發(fā)生什么
3、ondragover ：規(guī)定在何處放置被拖動(dòng)的數(shù)據(jù)
4、ondrop ：進(jìn)行放置
5、dataTransfer.setData() ：設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值
6、preventDefault() ：阻止瀏覽器對元素的默認(rèn)處理方式
7、dataTransfer.getData("Text") ：獲得被拖的數(shù)據(jù)
拖放（Drag 和 drop）是 HTML5 標(biāo)準(zhǔn)的組成部分?？梢允褂猛戏胚M(jìn)行驗(yàn)證，識別人機(jī)。拖放可以使你的界面不再單調(diào)無趣。
關(guān)注我，跟著我每天學(xué)習(xí)一點(diǎn)點(diǎn)，讓你不在枯燥，不在孤單..
全網(wǎng)可搜：小院里的霍大俠， 免費(fèi)獲取簡單易懂的實(shí)戰(zhàn)編程案例。編程/就業(yè)/副業(yè)/創(chuàng)業(yè)/資源。
