簡單講解一下思路：
話不多說，先貼dom結(jié)構(gòu)代碼,
<body>
<div id="dragsource">
<p dir="ltr" draggable="true" id="zuotoyou">被拖動的元素左右1</p>
<p dir="rtl" draggable="true" id="youtozuo">被拖動的元素右左2</p>
<!-- 釋放區(qū) -->
<div id="target">
<p>dom元素拖動到這</p>
</div>
<div id="target1" style="border:1px;width: 100px;height: 100px;background-color: #eeeeee;">
文件拖動到這
</div><!-- end釋放區(qū) -->
<table id="table">
<!-- 顯示文件相關(guān)信息 -->
</table>
</div>
</body>```
第一步，創(chuàng)建要拖動的來源項(xiàng)目氓润，增加屬性draggable="true"讓元素可以拖動为居。
<p draggable="true" id="zuotoyou">被拖動的元素</p>
第二步刺洒，處理拖動事件讥巡，這個簡單肖爵，看英文名就知道是什么意思缅叠。
dragsrart:在元素開始被拖動時觸發(fā)悄泥，
dragend:在元素開始拖動完成時觸發(fā)，
drag：元素被拖動的過程中反復(fù)觸發(fā)肤粱。
e.dataTransfer.setData('draggedID',e.target.id);后面會講先不用管弹囚。
//處理拖動
var dragsource = document.getElementById('dragsource');
dragsource.ondragstart = function(e){
e.dataTransfer.setData('draggedID',e.target.id);
console.log('dragsource');
}
dragsource.ondragend = function(e){
console.log('dragend');
}
dragsource.ondrag = function(e){
//console.log(e.x);//拖動過程中每幾毫秒執(zhí)行一次
}
第三步，創(chuàng)建釋放區(qū)领曼，接收釋放
dragenter:被拖動元素進(jìn)入釋放區(qū)時觸發(fā)鸥鹉，
dragover:被拖動元素進(jìn)入釋放區(qū)移動時觸發(fā)，
dragleave:拖動元素沒有放下就從釋放區(qū)離開庶骄，
drop:被拖動元素在釋放區(qū)放下時觸發(fā)
//創(chuàng)建釋放區(qū)
var target = document.getElementById('target');
target.ondragenter = handleDrag;//被拖動元素進(jìn)入釋放區(qū)時觸發(fā)
target.ondragover = handleDrag;//被拖動元素進(jìn)入釋放區(qū)移動時觸發(fā)
function handleDrag(e){
//通知瀏覽器不要執(zhí)行瀏覽器的默認(rèn)動作（瀏覽器默認(rèn)是拒絕接受任何拖放項(xiàng)目的）
e.preventDefault();
}
target.ondragleave = function(e){
console.log('拖動元素沒有放下就從釋放區(qū)離開');
}
//被拖動元素在釋放區(qū)放下時觸發(fā)
target.ondrop = function(e){
var draggedID = e.dataTransfer.getData('draggedID');
console.log('draggedID:',draggedID);
var newElem = document.getElementById(draggedID).cloneNode(true);//true還克隆了其子元素毁渗，false只克隆其自身
console.log(newElem);
target.innerHTML = '';
target.appendChild(newElem);
}
DataTransfer對象，用于存放數(shù)據(jù)单刁，你可以先理解為android的sharedperference.
setData(<format>,<data>)設(shè)置指定格式的數(shù)據(jù)祝蝠；
getData(<format>)得到數(shù)據(jù)；
files 返回文件列表
感覺廢話太多了幻碱，直接上完整代碼绎狭，注釋夠詳細(xì)了！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="dragsource">
<p dir="ltr" draggable="true" id="zuotoyou">被拖動的元素左右1</p>
<p dir="rtl" draggable="true" id="youtozuo">被拖動的元素右左2</p>
<div id="target">
<p>dom元素拖動到這</p>
</div>
<div id="target1" style="border:1px;width: 100px;height: 100px;background-color: #eeeeee;">
文件拖動到這
</div><!-- end釋放區(qū) -->
<table id="table">
<!-- 顯示文件相關(guān)信息 -->
</table>
</div>
</body>
</html>
<script type="text/javascript">
//var draggedID;//利用全局變量獲取被拖動元素的id褥傍，以便克隆
//創(chuàng)建釋放區(qū)
var target = document.getElementById('target');
target.ondragenter = handleDrag;//被拖動元素進(jìn)入釋放區(qū)時觸發(fā)
target.ondragover = handleDrag;//被拖動元素進(jìn)入釋放區(qū)移動時觸發(fā)
function handleDrag(e){
//根據(jù)數(shù)據(jù)過濾被拖動項(xiàng)目儡嘶，Chrome過濾不可用，因?yàn)閐ragenter和dragover里getData方法無效恍风！
console.log('handleDrag:',e.dataTransfer.getData('draggedID'));
if(e.dataTransfer.getData('draggedID') == 'zuotoyou'){
//通知瀏覽器不要執(zhí)行瀏覽器的默認(rèn)動作（瀏覽器默認(rèn)是拒絕接受任何拖放項(xiàng)目的）
e.preventDefault();
}
}
target.ondragleave = function(e){
console.log('拖動元素沒有放下就從釋放區(qū)離開');
}
//被拖動元素在釋放區(qū)放下時觸發(fā)
target.ondrop = function(e){
var draggedID = e.dataTransfer.getData('draggedID');
console.log('draggedID:',draggedID);
var newElem = document.getElementById(draggedID).cloneNode(true);//true還克隆了其子元素蹦狂，false只克隆其自身
console.log(newElem);
target.innerHTML = '';
target.appendChild(newElem);
}
//處理拖動
var dragsource = document.getElementById('dragsource');
dragsource.ondragstart = function(e){
console.log(e);
//draggedID = e.target.id;
e.dataTransfer.setData('draggedID',e.target.id);
console.log('dragsource');
}
dragsource.ondragend = function(e){
console.log(e);
console.log('dragend');
}
dragsource.ondrag = function(e){
//console.log(e.x);//拖動過程中每幾毫秒執(zhí)行一次
}
//DataTransfer 像釋放區(qū)傳輸數(shù)據(jù)
//eg:不使用全局變量誓篱，如上
//拖拽文件
//創(chuàng)建釋放區(qū)
var target1 = document.getElementById('target1');
target1.ondragenter = handleDrag;//被拖動元素進(jìn)入釋放區(qū)時觸發(fā)
target1.ondragover = handleDrag;//被拖動元素進(jìn)入釋放區(qū)移動時觸發(fā)
function handleDrag(e){
//通知瀏覽器不要執(zhí)行瀏覽器的默認(rèn)動作（瀏覽器默認(rèn)拒絕接受任何拖放項(xiàng)目）
e.preventDefault();
}
target1.ondragleave = function(e){
console.log('拖動元素沒有放下就從釋放區(qū)離開');
}
//被拖動元素在釋放區(qū)放下時觸發(fā)
target1.ondrop = function(e){
var fileList = e.dataTransfer.files;//fileList是數(shù)組
console.log(fileList);
table.innerHTML = '<tr><th>Name</th><th>type</th><th>size</th></tr>';
for(var i = 0 ;i<fileList.length;i++){
var row = '<tr><td style="border:1px black solid;">'+fileList[i].name+'</td><td>'+fileList[i].type+'</td><td>'+fileList[i].size+'</td></tr>';
table.innerHTML +=row;
}
}
</script>
最后是不是可以做個批量的文件拖拽上傳呢？
if(fileList || true){
for (var i = 0; i<fileList.length; i++) {
formData.append('filename'+i,fileList[i]);
}
}
動手吧凯楔，不試試怎么知道窜骄！
