什么是DragandDrop（拖放）？简单来说，HTML5提供了DragandDropAPI，允许用户用鼠标选择一个可拖动的元素，移动鼠标拖放一个可以放置在该元素上的过程。相信大家或多或少都接触过拖放，比如浏览器中多个标签页之间的拖放排序，手机中app的拖放排序等等，拖放已经为我们提供了更方便、更灵活的网络应用体验。HTML5DragandDropDnD规范定义了一种基于事件的拖放机制和附加标签来标记网页上几乎所有的可拖动元素类型。一个典型的拖动操作是这样开始的：用户用鼠标选择一个可拖动（draggable）的元素，将鼠标移到一个可放置的元素上，然后释放鼠标。在操作过程中，某些事件类型会被触发，而某些事件类型可能会被触发多次（例如drag和dragover事件类型）。总结起来很简单：DragSource(Whattodrag)=>DropTarget(Wheretodrop)dragevent所有的拖动事件都对应一个全局的事件处理函数，DndAPI有8个事件，可以分为绑定在3个ontheDragSource,5boundontheDragTargetDragSourceEventDescriptiondragstart当用户开始拖动元素或选定文本时触发。drag在拖动元素或选定文本时触发。dragend当拖动操作结束时触发（例如释放鼠标按钮或按下“Esc”键）。DropTargetEventDescriptionDragenter当元素或选定的文本被拖动到放置目标时触发。dragover当元素或选定的文本被拖动到放置目标上时触发（每100毫秒）。dragexit当元素不再是拖动操作的选定目标时触发。dragleave当拖动的元素或选定的文本离开可放置的目标时触发。drop当一个元素或选定的文本被放置在一个可放置的目标上时触发。注意在鼠标操作拖放过程中，有些事件可能会被触发多次，（如：draganddragover）。使用时注意防抖或节流。当使用event.preventDefault()来阻止dragover事件中的默认事件行为时，可以正确触发drop事件。在Firefox浏览器中触发drop时，使用event.preventDefault()来阻止默认的事件行为，防止打开新标签页数据界面HTML拖拽数据界面有DataTransfer、DataTransferItem和DataTransferItemList三个。在拖放操作过程中，DataTransfer对象用于保存通过拖放动作拖拽到浏览器的数据。它可以保存一种或多种数据，一种或多种数据类型。DataTransfer公共属性属性类型说明dropEffectString获取/设置实际的放置效果，应该始终设置为effectAllowed、copy、move、link的可能值之一，noneeffectAllowedString用于指定拖动时允许的效果。FilesFileList将存储的数据类型列表作为第一项，其顺序与添加数据的顺序相同。如果没有添加数据，则返回一个空列表。typesDOMStringList包含数据传输中可用的所有本地文件的列表。如果拖动操作不涉及拖动文件，则该属性为空列表。DataTransfer常用方法voidclearData([inStringtype])StringgetData(inStringtype)voidsetData(inStringtype,inStringdata)voidsetDragImage(innsIDOMElementimage,inlongx,inlongy)通过定义注意点MIME（MultipurposeInternetMailExchange）来指定数据传输类型，例如：text/plainfunctiondetection想象一下，我们要开发一个使用HTML5DnDAPI实现的丰富的交互式应用程序。事实证明它很糟糕，因为浏览器不支持它。对我们是否需要使用降级方案还是有很大的参考意义的。下面介绍两种常用的方法来帮助我们检测。caniuseModernizrModernizr是一个优秀的库，可以用来检测用户的浏览器是否支持HTML5和CSS3特性。if(Modernizr.draganddrop){//BrowsersupportsHTML5DnD.}else{//Fallbacktoalibrarysolution.}要实现拖放HTML属性实现拖放元素只需要添加draggable="true"
