在最近的一个项目中有这么一个需求，就是将网页中的图片拖入到ps，然后能够通过ps直接打开该图片。对于这个需求明知道很难去实现，但是还是抱着尝试的心态去了解了一个关于html5 拖拽的内容，有部分的深入的了解

拖拽的基本使用

对与drag事件，平时用的也很多。基本的使用，就是设置我们想要进行拖拽的dom结构的dragable=true，这个时候我这个元素就变成了可以进行拖拽的dom了。但是仅仅是拖拽我基本上还不满足我们的日常需求。因为在我们的日常使用中，希望的是在能够参与到拖拽的过程中，并且能够在拖拽过程中使用道拖拽的相关的事件回调以及事件中帮我存储的数据。这个时候我们就需要对拖拽相对应的事件有一定的了解。

首先关于拖拽的事件有：ondrag,ondragover,ondragleave,ondrop,ondragstart,ondragend，这些事件主要可以分为两类：

1、在拖动目标上触发事件 (源元素):

ondragstart - 用户开始拖动元素时触发

ondrag - 元素正在拖动时触发

ondragend - 用户完成元素拖动后触发

2、释放目标时触发的事件:

ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件

ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件

ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件

ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

创建可拖拽元素

我们如果需要一个元素可以被拖拽，这个时候，我们需要在该元素上面添加一个一个属性，就是上面我们我们介绍的 dragable=true， 就像如下代码一样：

然后我们监听可以拖拽相关的事件首先，我们得先建一个可以拖放的位置，具体的代码如下：

接着就是我们的拖拽相关的事件的触发顺序以及触发情况；

var dragDom = document.getElementById('dragDom');dragDom.ondrag = function () {  console.log('ondrag');};dragDom.ondragstart = function () {    console.log('ondragstart');};dragDom.ondragend = function () {    console.log('ondragend');};var dropDom = document.getElementById('dropDom');dropDom.ondrop = function (event) {    console.log('ondrop');};dropDom.ondragenter = function (event) {    console.log('ondragenter');};dropDom.ondragover = function (event) {    console.log('ondragover');};dropDom.ondragleave = function () {    console.log('ondragleave');};

下面就是这个拖拽相关的执行结果

在这个执行的结果里面，我们是看不到有关drop的输出，主要原因是我没有在放置的元素内将这个给搁进去。

创建可以接收从外部拖拽的内容

平时为我们可能更希望我们能够从外界进行拖拽内容，比如说常用的拖拽上传等等。但是当我们真的从外面拖拽以文件至页面中的某个box之后，就会发现，实际的结果并不像我们想象的那样，而是要么直接打开，要么就直接下载。这是为什么，从上面我们能够看出来，当我们拖拽一个东西进入容器内后，这个时候drageover 事件的触发会优先于 drop事件的触发，并且在drop的时候回如果不把系统的原生的事件给阻止掉的话，就会出现上面的那个情况。然后就会打开文件或者是下载文件，而达不到我们所想要的结果。 这个时候只需要我们将浏览器的默认的drageover以及drop事件给阻止掉就能够达到我们的目的。具体代码如下：

var dropDom = document.getElementById('dropDom');dropDom.ondragover = function (event) {    event.preventDefault();};dropDom.ondrop = function (event) {    event.preventDefault();};

拖拽上传

拖拽上传使我们平时使用拖拽常用的功能。以下就是一个基本的拖拽上传的功能。 <div id="dropbox" style="height: 300px; background: red;"></div>

var dropbox;dropbox = document.getElementById("dropbox");dropbox.addEventListener("dragenter", dragenter, false);dropbox.addEventListener("dragover", dragover, false);dropbox.addEventListener("drop", drop, false);function dragenter(e) {    e.stopPropagation();    e.preventDefault();}function dragover(e) {    e.stopPropagation();    e.preventDefault();}function handleFiles (fiels) {    console.log(fiels);}function drop(e) {    e.stopPropagation();    e.preventDefault();    var dt = e.dataTransfer;    var files = dt.files;    handleFiles(files);}