[练习]JS鼠标拖拽(DnD)操作 - 囧囧的前端笔记

拖放（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;};