拖放元素

拖放流程:
涉及到两个标签，一个是拖动标签，一个是拖入的标签。
拖动标签：
首先需要给它设置允许拖动属性 draggalbe=true
为其绑定拖动开始事件(只在拖动开始时触发)，拖动中移动事件，拖动完成事件
dragstart事件内通过setData来设置值如id
drag事件内可以通过e对象来获取当前位置信息
dragend事件会在最后完成时触发
释放目标标签：
事件顺序是：拖入范围内事件 范围内拖动事件 拖出范围事件 释放鼠标事件
以上四个事件内都可通过e来获取位置信息
dragenter 拖入我范围内事件 可以在此事件上绑定当进入容器时改变标签样式
dragover 在容器内拖动
dragleave 拖出我的范围

drop 落下事件，这事件内获取id信息把图片移动到容器内

//拖动目标事件
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内
})

-------------------拖动选择上传文件

这种都是把桌面文件拖入容器内来表示上传

所以它只用到了容器上的事件

阻止dragover 事件默认行为,不阻止的话浏览器会认为打开这张图上

在drop落下事件上获取file

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+'" />')
})