拖放(Drag and Drop,DnD)操作因为涉及到与底层OS的结合,所以是较为复杂的交互操作。 这里先实现一个简单的拖拽图片到浏览器显示到操作, 主要用到了HTML5中的FileAPI:
先上DEMO
DnD demo
需要注意的是浏览器通过取消相应的拖拽事件来表明它对该事件有兴趣, 比如通过取消dragover
来表明浏览器已经做好准备接受进一步的拖拽,接着说dragend
最后到drop
,drop
事件发生时,就可以使用HTML5新的文件API也就是FileAPI
进行数据交互,具体见本栗代码?
代码:
HTML
<div id="holder"></div>
<p id="status">File API可用</p>
<p>鼠标拖拽图片放入框中</p>
CSS
#holder { border: 10px dashed #ccc; width: 300px; height: 300px; margin: 20px auto;}
#holder.hover { border: 10px dashed #333; }
p {text-align:center;}
JS
var holder = document.getElementById('holder'),
state = document.getElementById('status');
if (typeof window.FileReader === 'undefined') {
state.className = 'fail';
} else {
state.className = 'success';
state.innerHTML = 'File API可用';
}
holder.ondragover = function () {
this.className = 'hover';
console.log('dragover'); return false;
};
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
//console.log(e)
this.className = '';
e.preventDefault();
var file = e.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function (event) {
console.log(event.target);
holder.style.background = 'url(' + event.target.result + ') no-repeat center';
};
console.log(file);
reader.readAsDataURL(file);
return false;
};
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。