一、拖拽API
设置对象可以拖动
<img draggable="true" />
事件
dragover有一个默认行为！！！那就是当dragover触发时，drop会失效！！！！
source.addEventListener('dragstart',function(ev){
console.log('源对象开始被拖动');
},false)
source.addEventListener('drag',function(ev){
console.log('源对象被拖动过程中(鼠标可能在移动也可能未移动)');
},false)
source.addEventListener('dragend',function(ev){
console.log('源对象被拖动结束');
},false)
process.addEventListener('dragenter',function(ev){
console.log('目标对象被源对象拖动着进入');
},false)
process.addEventListener('dragleave',function(ev){
console.log('源对象拖动着离开了目标对象');
},false)
process.addEventListener('dragover',function(ev){
console.log('目标对象被源对象拖动着悬停在上方');
},false)
target.addEventListener('drop',function(ev){ // drop事件由c元素产生
console.log('源对象拖动着在目标对象上方释放/松手');
ev.preventDefault();
},false)
document.ondragover = function(e){e.preventDefault();}
dataTransfer 对象
- 在所有拖放事件中提供了一个数据传递对象 dataTransfer，用于在源对象和目标对象间传递数据。
setData()
该方法向 dataTransfer 对象中存入数据。接收两个参数，第一个表示要存入数据种类的字符串，现在支持有以下几种：
text/plain：文本文字。
text/html：HTML文字。
text/xml：XML文字。
text/uri-list：URL列表，每个URL为一行。
第二个参数为要存入的数据。例如：
event.dataTransfer.setData('text/plain','Hello World');
getData()
该方法从 dataTransfer 对象中读取数据。参数为在 setData 中指定的数据种类。例如：
event.dataTransfer.getData('text/plain');
clearData()
该方法清除 dataTransfer 对象中存放的数据。参数可选，为数据种类。若参数为空，则清空所有种类的数据。例如：
event.dataTransfer.clearData();
setDragImage()
该方法通过用img元素来设置拖放图标。接收三个参数，第一个为图标元素，第二个为图标元素离鼠标指针的X轴位移量，第三个为图标元素离鼠标指针的Y轴位移量。例如：
var source = document.getElementById('source'),
icon = document.createElement('img');
icon.src = 'img.png';
source.addEventListener('dragstart',function(ev){
ev.dataTransfer.setDragImage(icon,-10,-10)
},false)
| 属性 | 描述 |
|---|---|
| dropEffect | 表示拖放操作的视觉效果，允许对其进行值的设定。该效果必须在用effectAllowed属性指定的允许的视觉效果范围内，允许指定的值有：none、copy、link、move。 |
| effectAllowed | 用来指定当元素被拖放时所允许的视觉效果。可以指定的值有：none、copy、copyLink、copyMove、link、linkMove、all、uninitialize。 |
| files | 返回表示被拖拽文件的 FileList。 |
| types | 存入数据的MIME类型。如果任意文件被拖拽，那么其中一个类型将会是字符串”Files”。 |
图片拖拽到网页中并读取
container.ondrop = function(e){
console.log('客户端拖动着一张图片释放了...')
//当前的目标对象读取拖放源对象存储的数据
//console.log(e.dataTransfer); //显示有问题
//console.log(e.dataTransfer.files.length); //拖进来的图片的数量
var f0 = e.dataTransfer.files[0];
//console.log(f0); //文件对象 File
//从文件对象中读取数据
var fr = new FileReader();
//fr.readAsText(f0); //从文件中读取文本字符串
fr.readAsDataURL(f0); //从文件中读取URL数据
fr.onload = function(){
console.log('读取文件完成')
console.log(fr.result);
var img = new Image();
img.src = fr.result; //URL数据
container.appendChild(img);
}
}
