js原生拖拽

原生拖拽

通过拖拽事件，可以控制拖放相关的各个方面，其中最关键的地方在于确定哪里发生了拖拽事件，有些事件是在被拖动的元素上触发的，而有些事件是在放置目标上触发的，拖动某个元素时，将依次触发下列事件:

• dragstart
• drag
• dragend

按下鼠标并开始移动鼠标时，会在被拖放的元素上触发dragstart事件，此时光标变成不能放符号，表示元素不能放到自己上面，拖动开始时，可以通过ondragstart事件处理程序来运行js。
触发dragstart之后，会触发drag事件，而在元素被拖动期间会持续触发该事件，这个事件与mousemove事件相似，在鼠标移动过程中，mousemove事件也会持续发生，当拖动停止时，会触发dragend事件。
上面三个事件的目标都是被拖动的元素，默认情况下，浏览器不会在拖动期间改变被拖动元素的外观，但可以自己修改，不过，大多数浏览器会正被拖动的元素创建一个半透明的副本，这个副本始终跟随光标移动。
当某个元素被拖动到一个有效的放置目标上时，下列的事件会依次发生：

• dragenter
• dragover
• dragleave或drop

只要有元素被拖动到旋转目标上，就会触发dragenter事件，紧接着的是dragover事件，而且被拖动的元素还在旋转目标的范围内移动时，就会持续触发该事件，如果元素被拖出了放置目标，dragover事件不再发生，但会触发dragleave事件，如果元素被放到了放置目标中，则会触发drop事件而不是dragleave事件。

原生拖拽流程

• 设置可拖拽目标：draggable = true
• 监听dragstart设置拖拽数据, 一般有二种数据类型:text或URL，如下所示:
  ```
  //设置和接收文本数据
  event.dataTransfer.setData("text","some text");
  var text = event.dataTransfer.getData("text");

//设置和接收URL
event.dataTransfer.setData("URL","http://moyu-edu.com");
var util = event.dataTransfet.getData("URL");

- 为拖拽操作设置反馈图标
- 设置允许的拖拽效果copy,move,link
- 设置拖放目标，默认情况浏览器阻止所有的拖放操作，所以需要监听dragenter或dragover取消浏览器默认行为使元素可拖放
- 监听drop事件执行所需操作



#### 拖放事件
- dragstart:拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从操作系统拖拽文件到浏览器时不触发此事件.
- dragenter:拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,如高亮
- dragover:拖拽时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素.
- dragleave:拖拽时鼠标移出目标元素时在目标元素上触发.此时监听器可以取消掉前面设置的视觉效果.
- drag:拖拽期间在被拖拽元素上连续触发
- drop:鼠标在拖放目标上释放时,在拖放目标上触发.此时监听器需要收集数据并且执行所需操作.如果是从操作系统拖放文件到浏览器,需要取消浏览器默认行为.
- dragend:鼠标在拖放目标上释放时,在拖拽元素上触发.将元素从浏览器拖放到操作系统时不会触发此事件.



#### dataTransfer类型
- dropEffect: 拖拽交互类型,通常决定浏览器如何显示鼠标光标并控制拖放操作.常见的取值有copy,move,link和none
- effectAllowed: 指定允许的交互类型,可以取值:copy,move,link,copyLink,copyMove,limkMove, all, none默认为uninitialized(允许所有操作)
- files: 包含File对象的FileList对象.从操作系统向浏览器拖放文件时有用.
- types: 保存DataTransfer对象中设置的所有数据类型.
- setData(format, data): 以键值对设置数据,format通常为数据格式,如text,text/html
- getData(format): 获取设置的对应格式数据,format与setData()中一致
- clearData(format): 清除指定格式的数据
- setDragImage(imgElement, x, y): 设置自定义图标

www.moyu-edu.com

拖拽下面的方块到上面任意容器中

从文件夹中拖拽图片到下面的区域进行预览

```

转载于:https://my.oschina.net/u/1792175/blog/598017