拖放事件

拖放流程:<br />
涉及到两个标签，一个是拖动标签，一个是拖入的标签。<br />
拖动标签：<br />
首先需要给它设置允许拖动属性 draggalbe=true<br />
为其绑定拖动开始事件(只在拖动开始时触发)，拖动中移动事件，拖动完成事件<br />
dragstart事件内通过setData来设置值如id<br />
drag事件内可以通过e对象来获取当前位置信息<br />

dragend事件会在最后完成时触发<br />

释放目标标签：<br />
事件顺序是：拖入范围内事件  范围内拖动事件  拖出范围事件  释放鼠标事件<br />
以上四个事件内都可通过e来获取位置信息<br/>
dragenter  拖入我范围内事件 可以在此事件上绑定当进入容器时改变标签样式<br/>
dragover 在容器内拖动<br />
dragleave 拖出我的范围<br />
drop  落下事件，这事件内获取id信息把图片移动到容器内

<!-- 设置图片允许拖动-->
<img src="img/u6_07.png" id="img1" draggable="true" >

//拖动目标事件
var img1=document.querySelector('#img1');
//用户开始拖动元素时触发
img1.addEventListener('dragstart',function(e){
console.log('按下开始拖动')
e.dataTransfer.setData('txt',e.target.id);//设置拖动数据txt属性值为id
})
//元素正在拖动时触发 当按下移动时触发。
img1.addEventListener('drag',function(e){
console.log('拖动中')

//可以从e.clientX clientY pageX pageY  x y 等来获取距离
})
//用户完成元素拖动后触发
img1.addEventListener('dragend',function(e){
console.log('结束了')
})

//释放目标触发事件
var div1=document.querySelector('#div1')
//当被鼠标拖动的对象进入其容器范围内时触发此事件
//在进入范围时触发一次
div1.addEventListener('dragenter',function(e){
console.log('进入了我的范围')
console.log(e);
})
//当某被拖动的对象在另一对象容器范围内拖动时触发此事件 
//只要在范围内移动都会触发
div1.addEventListener('dragover',function(e){
e.preventDefault();
console.log('在我的范围内拖动')

console.log(e);
})
//当被鼠标拖动的对象离开其容器范围内时触发此事件
//触发一次
div1.addEventListener('dragleave',function(e){
console.log('拖离了我的范围')
console.log(e);
})
//在一个拖动过程中，释放鼠标键时触发此事件
div1.addEventListener('drop',function(e){
console.log('释放了拖动')
console.log(e);
e.preventDefault();
var id=e.dataTransfer.getData('txt');//获取txt值
e.target.appendChild(document.getElementById(id))//添加到本ele内
})

拖入上传文件：

var div1=document.querySelector('#div1');
//ondragover 在容器内拖动
//默认地，无法将数据/元素放置到其他元素中。
//如果需要设置允许放置，
//我们必须阻止对元素的默认处理方式。
div1.addEventListener('dragover',function(e){//绑定拖动事件
e.preventDefault();//阻止行为
})

div1.addEventListener('drop',function(e){//绑定拖放后事件 来获取图片
e.preventDefault();
var files=e.dataTransfer.files//获取文件
if(files.length==0){
return ;
}
if(files[0].type.indexOf('image') ===-1){
alert('请选择图片');
return ;
}
div1.innerHTML='name='+files[0].name+'size='+files[0].size;
console.log(files[0])
var img=URL.createObjectURL(files[0]);//创建指向参数对象的url  参数可是blob file
$(document.body).append('<img src="'+img+'" />')
})