简单讲解一下思路：
话不多说，先贴dom结构代码,
<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释放区 -->
<table id="table">
<!-- 显示文件相关信息 -->
</table>
</div>
</body>```
第一步，创建要拖动的来源项目，增加属性draggable="true"让元素可以拖动。
<p draggable="true" id="zuotoyou">被拖动的元素</p>
第二步，处理拖动事件，这个简单，看英文名就知道是什么意思。
dragsrart:在元素开始被拖动时触发，
dragend:在元素开始拖动完成时触发，
drag：元素被拖动的过程中反复触发。
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);//拖动过程中每几毫秒执行一次
}
第三步，创建释放区，接收释放
dragenter:被拖动元素进入释放区时触发，
dragover:被拖动元素进入释放区移动时触发，
dragleave:拖动元素没有放下就从释放区离开，
drop:被拖动元素在释放区放下时触发
//创建释放区
var target = document.getElementById('target');
target.ondragenter = handleDrag;//被拖动元素进入释放区时触发
target.ondragover = handleDrag;//被拖动元素进入释放区移动时触发
function handleDrag(e){
//通知浏览器不要执行浏览器的默认动作（浏览器默认是拒绝接受任何拖放项目的）
e.preventDefault();
}
target.ondragleave = function(e){
console.log('拖动元素没有放下就从释放区离开');
}
//被拖动元素在释放区放下时触发
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对象，用于存放数据，你可以先理解为android的sharedperference.
setData(<format>,<data>)设置指定格式的数据；
getData(<format>)得到数据；
files 返回文件列表
感觉废话太多了，直接上完整代码，注释够详细了！
<!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释放区 -->
<table id="table">
<!-- 显示文件相关信息 -->
</table>
</div>
</body>
</html>
<script type="text/javascript">
//var draggedID;//利用全局变量获取被拖动元素的id，以便克隆
//创建释放区
var target = document.getElementById('target');
target.ondragenter = handleDrag;//被拖动元素进入释放区时触发
target.ondragover = handleDrag;//被拖动元素进入释放区移动时触发
function handleDrag(e){
//根据数据过滤被拖动项目，Chrome过滤不可用，因为dragenter和dragover里getData方法无效！
console.log('handleDrag:',e.dataTransfer.getData('draggedID'));
if(e.dataTransfer.getData('draggedID') == 'zuotoyou'){
//通知浏览器不要执行浏览器的默认动作（浏览器默认是拒绝接受任何拖放项目的）
e.preventDefault();
}
}
target.ondragleave = function(e){
console.log('拖动元素没有放下就从释放区离开');
}
//被拖动元素在释放区放下时触发
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);//拖动过程中每几毫秒执行一次
}
//DataTransfer 像释放区传输数据
//eg:不使用全局变量，如上
//拖拽文件
//创建释放区
var target1 = document.getElementById('target1');
target1.ondragenter = handleDrag;//被拖动元素进入释放区时触发
target1.ondragover = handleDrag;//被拖动元素进入释放区移动时触发
function handleDrag(e){
//通知浏览器不要执行浏览器的默认动作（浏览器默认拒绝接受任何拖放项目）
e.preventDefault();
}
target1.ondragleave = function(e){
console.log('拖动元素没有放下就从释放区离开');
}
//被拖动元素在释放区放下时触发
target1.ondrop = function(e){
var fileList = e.dataTransfer.files;//fileList是数组
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]);
}
}
动手吧，不试试怎么知道！
网友评论