拖拽HTML元素之draggable

一、HTML 新增了一个 draggable 属性，给需要进行拖放的元素加上属性draggable=”true” 就可以让该元素能够被拖拽移动。并且还有相关拖拽的事件，可以添加到被拖拽的元素上，进行监听。示例及说明：

<div id="box" draggable="true" style="width: 100px;height: 100px;background-color: red;">Box</div>
……
//监听拖拽
window.onload = function(){
    var oDiv = document.getElementById("box");

    //目标元素的拖拽
    oDiv.ondragstart = function(){  //拖拽前最开始触发
        console.log("start...");
    }
    oDiv.ondrag = function(){   //拖拽前、拖拽结束 之间，连续触发
        console.log("ondrag...");
    } 
    oDiv.ondragend = function(){    //拖拽结束触发
        console.log("ondrag...");
    }

    //拖拽动作
    oDiv.ondragenter = function(){  //拖拽时 进入到目标元素区域时触发，相当于 mouseover 那样。我还可以拖拽其它可拖拽元素进入到该 oDiv 元素区域，也会触发的。
        console.log("ondragenter...");
    }
    oDiv.ondragover = function(e){  //进入目标元素区域后，离开元素区域前，持续触发，就是在目标元素原始位置区域内拖拽时会持续触发
        e.preventDefault(); //要让 drop 事件有效果，须在这个dragover内执行阻止默认事件
        console.log("ondragover...");
    }
    oDiv.ondragleave = function(){  //离开目标元素初始区域触发，相当于 mouseout
        console.log("ondragleave...");
    }
    oDiv.ondrop = function(){  //拖拽可拖拽的元素，把该元素拖拽进 oDiv 元素原来初始位置区域内时，再释放鼠标就会触发。可以用于实现拖拽上传功能。
        console.log("ondrop...");
    } 
}

以上含义，直接测试可能体会更深。
另外拖拽事件的 事件对象 内，还有一个属性：dataTransfer对象
解决火狐下不能拖拽：必须设置一下 dataTransfer 对象的 setData 方法才可以拖拽，比如 e.dataTransfer.setData(“ceshi”,”ceshi_value”)

二、实现拖拽上传

拖拽事件的 事件对象 内的 dataTransfer 属性，它内部还有很多属性（比如上面提到的 setData 方法），这里不一一讲解。只说一下，比较重要的 files 属性。

我们拖拽是可以当将浏览器外部的文件拖到浏览器内的那个指定区域的（记得在ondrop 内阻止默认事件，不然比如拖拽图片会自动在当前浏览器窗口打开你拖进来的图片），如果我们要判断拖拽的是什么文件类型，就得用 files。我们获取到的 files 是一个 filesList 的列表，files 下又有个 type 属性，返回文件类型。

oDiv.ondragover = function(e){
    e.preventDefault(); //要让 drop 事件有效果
}
oDiv.ondrop = function(e){
  e.preventDefault(); //阻止浏览器默认
  var fs = ev.dataTransfer.files;  //fs 是一个列表，里面是拖拽的文件
  console.log( fs.length );//返回拖拽文件的个数
  console.log( fs[0] );//拖拽的第一个文件
  console.log( fs[0].type );//返回拖拽文件的type类型
} 

接下来，我们认识下 FileReader 对象，它用于  读取文件信息，就可以进行上传啊，预览啊等等：

    oDiv.ondragover = function(e){
        e.preventDefault(); //要让 drop 事件有效果
    }

    oDiv.ondrop = function(e){
        e.preventDefault(); //阻止浏览器默认
        console.log(123)
        var fs = e.dataTransfer.files;  //fs 是一个列表，里面是拖拽的文件
        
        var fd = new FileReader(); //实例化一个 FileReader 对象
        fd.readAsDataURL( fs[0] );   //它会把这个文件转成文件信息。这个文件信息如果读取成功，那么就在它下面就会走一个onload的事件
        fd.onload = function(){
            alert(this.result);  //此时，我们从浏览器外部拖入一张图片到 oDiv
上，就会弹出图片的信息. 接下来，就可以把这个比如图片文件的信息上传后台存储了。
        }
    }