HTML5 拖放（Drag 和 Drop）
拖曳
拖曳是一種常見的特性，即抓取物件以後拖曳到另一個(gè)位置。
在 HTML5 中，拖曳是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖曳。
1、HTML5拖放
拖放（Drag和drop）是HTML5標(biāo)準(zhǔn)的組成部分。
2、拖曳開始
ondragstart：呼叫了一個(gè)函數(shù)，drag（event），它規(guī)定了被拖曳的資料
3、設(shè)定拖曳資料
setData（）：設(shè)定被拖曳資料的資料類型和值。
4、放入位置
ondragover：事件規(guī)定在何處放置被拖曳的資料。
5、放置
ondrop:當(dāng)放置被拖放資料時(shí)，會(huì)發(fā)生drop事件
總結(jié)：
在拖曳目標(biāo)上觸發(fā)事件（來(lái)源元素）：
ondragstart:使用者開始拖曳元素時(shí)觸發(fā)
ondrag:元素正在拖曳時(shí)觸發(fā)
ondragend:使用者完成元素拖曳後觸發(fā)
釋放目標(biāo)時(shí)觸發(fā)的事件
ondragenter:當(dāng)被滑鼠拖曳的物件進(jìn)入其容器範(fàn)圍內(nèi)時(shí)觸發(fā)此事件
ondragover:當(dāng)某被拖曳的物件在另一個(gè)物件容器範(fàn)圍內(nèi)拖曳時(shí)觸發(fā)此事件
ondragleave:當(dāng)被滑鼠拖曳的物件離開其容器範(fàn)圍內(nèi)時(shí)觸發(fā)此事件
ondrop:在一個(gè)拖曳過程中，釋放滑鼠鍵時(shí)觸發(fā)此事件
拖曳實(shí)例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>drop</title>
<style>
.box{
width: 400px;
height: 400px;
}
#box1{
float: left;
background-color: #CCCCCC;
}
#box2{
float: left;
background-color: aqua;
}
</style>
<script> var box1Div, msgDiv, img1, box2Dib;
window.onload = function () {
box1Div = document.getElementById("box1");
msgDiv = document.getElementById("msg");
img1 = document.getElementById("img1");
box2Div = document.getElementById("box2");
box1Div.ondragover = function (e) {
e.preventDefault();
}
box2Div.ondragover = function (e) {
e.preventDefault();
}
img1.ondragstart = function (e) {
e.dataTransfer.setData("imgId","img1");
}
box1Div.ondrop = dropImghandler;
box2Div.ondrop = dropImghandler;
function dropImghandler(e) {
//創(chuàng)建節(jié)點(diǎn)
var img = document.getElementById(e.dataTransfer.getData("imgId"));
e.target.appendChild(img);
}
}
function showObj(obj) {
var s = "";
for(var k in obj){
s+=k+":"+obj[k]+"<br/>";
}
msgDiv.innerHTML = s;
}</script>
</head>
<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<img id="img1" src="http://img4.imgtn.bdimg.com/it/u=4240085321,3307603809&fm=21&gp=0.jpg" alt="">
<div id="msg"></div>
</body>
</html>
