拖放事件(自己的学习笔记)

一、如何自定义拖放源和自定义拖放目标？

前者传输数据而不是文本内容，后者以某种方式响应拖放数据而不仅是显示它

二、拖放事件

任何有html draggable属性的文档元素都是拖放源。

当用户开始用鼠标在拖放源上拖放时，浏览器并没有选择元素内容，在该元素上触发dragstart事件，该事件处理程序调用

datatransfer.setdata()指定当前可用的拖放源数据和数据类型（当新的html5 api实现，可用datatransfer.items.add()代替）

datatransfer.effectallowed()——指定支持移动、复制、链接传输操作中的几种

datatransfer.setdragimage()/addelement()——指定图片或者文档元素用做拖动时的视觉表现

当放置数据时，触发dragend事件，如果拖放源支持移动操作，就会检查datatransfer.dropeffect看看是否实际执行了移动操作，如果执行了数据就会被传输到其他地方，应该从数据源中删除它

拖放目标比拖放源更难处理

有4个事件在拖放目标上面触发

dragenter——拖放对象进入文档元素时触发

datatransfer.types——确定拖放对象的可用数是否是其可以理解的格式

拖放目标通过取消事件告知浏览器其对放置感兴趣

如果元素不取消dragenter事件，那么浏览器将不会把它作为本次拖放的拖放目标

否则发送dragover事件表示用户继续在目标上面拖动对象

拖放目标必须监听且取消所有事情来表明他继续对放置感兴趣

dragleave——表示要取消任何其他为响应dragenter事件而执行的可视化反馈

dragenter和dragleave会冒泡

拖放对象到拖放目标上——触发drop事件

该事件应该使用datatransfer.getdata()来获取传输的数据并做处理

用户放置一个或者多个目标——datatransfer.files将是一个类数组对象