标签：
1、draggable ="true" 元素可以拖拽了
2、拖拽元素事件：
dragstart 拖拽前触发
drag 拖拽前、拖拽结束之间，连续触发
dragend 拖拽结束触发
3、目标元素事件：
dragenter 进入目标元素触发
dragover 在目标元素移动触发
dragleave 离开目标元素触发
drop 在目标元素上释放鼠标触发，必须在dragover中阻止默认事件，drop才会起作用。
4、执行顺序：
drop不触发的时候：
dragstart-->drag[不动也会N次触发]-->dragenter-->(dragover-->drag)[移动就会N次触发dragover-->drag]-->dragleave-->dragend
drop触发的时候：
dragstart-->drag[不动也会N次触发]-->dragenter-->(dragover-->drag)[移动就会N次触发dragover-->drag]-->dragover-->drop-->dragend
5、dataTransfer 对象，在event下。
1、ev.dataTransfer.setData(key,value) --> ev.dataTransfer.setData(‘test‘,‘abc‘) 可解决在火狐下的问题
2、ev.dataTransfer.effectAllowed = ‘copy‘ 光标的样式，(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)
3、ev.dataTranfer.setDragImage(obj,0,0) 设置拖拽时显示的图和位置
例子：
<div draggable="true" id="div1"></div>
<div id="div2"></div>
<script type="text/javascript">
var oDiv1 = document.getElementById(‘div1‘),
oDiv2 = document.getElementById(‘div2‘);
oDiv1.ondragstart = function(ev){
var ev = ev || event;
ev.dataTransfer.setData(‘test‘,‘abc‘); //设置后，在火狐中拖拽才有用
ev.dataTransfer.effectAllowed = ‘copy‘; //设置目标元素鼠标的样式
ev.dataTransfer.setDragImage(oDiv2,0,0); //设置拖拽时显示的图和位置
console.log(‘开始拖拽‘);
};
oDiv1.ondrag = function(){
console.log(‘拖拽过程中....‘);
};
oDiv1.ondragend = function(){
console.log(‘拖拽完成‘);
};
oDiv2.ondragenter = function(){
console.log(‘拖拽进入放置元素‘);
};
oDiv2.ondragover = function(ev){
console.log(‘在放置元素内移动‘);
ev.preventDefault(); //必须阻止默认事件，ondrop才会起作用
};
oDiv2.ondragleave = function(){
console.log(‘拖拽离开放置元素‘);
};
oDiv2.ondrop = function(ev){
console.log(ev.dataTransfer.getData(‘test‘));
console.log(‘释放鼠标‘);
};
4、ev.dataTransfer.files -->外部文件的集合（列表）
ev.dataTransfer.files[i] -->第i个文件
ev.dataTransfer.files.length -->列表长度
ev.dataTransfer.files[i].type -->文件类型：image/png、image/jpeg、text/plain等
6、FileReader 读取文件信息
var fd = new FileReader();
fd.readAsDataURL(文件); // 文件信息
fd.onload = function(){ //文件读取成功，触发
console.log(this.result) //文件数据
};
例子：
<div id="div1" draggable="true" >将文件拖拽到此区域</div>
<script type="text/javascript">
var oDiv1 = document.getElementById(‘div1‘);
oDiv1.ondragenter = function () {
this.innerHTML = ‘可以释放了‘;
};
oDiv1.ondragover = function(ev){
var ev = ev || event;
ev.preventDefault(); //为了drop有效
};
oDiv1.ondragleave = function(){
this.innerHTML = ‘将文件拖拽到此区域‘;
};
oDiv1.ondrop = function(ev) {
var ev = ev || event;
var fs = ev.dataTransfer.files;
console.log(fs.length); //列表长度
console.log(fs[0].type); //文件的类型
for (var i=0;i<fs.length;i++) {
if (fs[i].type.indexOf(‘image‘) != -1) { //判断是否是图片？
var fd = new FileReader();
fd.readAsDataURL(fs[i]);
fd.onload = function(){
oUl = document.createElement(‘ul‘);
oLi = document.createElement(‘li‘);
oImg = document.createElement(‘img‘);
oImg.src = this.result; //this.result为文件数据
oImg.style.width = ‘100px‘;
oLi.appendChild(oImg);
oUl.appendChild(oLi);
document.body.appendChild(oUl);
};
} else {
alert(‘不是图片‘);
}
}
ev.preventDefault(); //防止文件拖拽到目标元素时，打开文件
};
</script>
标签：
原文地址：http://www.cnblogs.com/joya0411/p/4461653.html
