近在摸鱼的过程中，发现了一个拖动组件，发现挺有意思的。于是想到在HTML5原生就支持这个功能，于是就想着自己也试着弄一个小demo试试看

提要

最早在网页中引入拖放功能的是IE4。当时，网页中只有两种对象可以拖放，图像和某些文本。拖动图像时，先把鼠标放在图像上，按住鼠标不放就可以拖动它。拖动文本时，要先选中文本，然后就可以想要拖动图像那样拖动。在IE4中，唯一有效的防止目标是文本框，到了IE5，拖放功能添加了新的时间，网页中几乎任意元素都可以作为目标元素。HTML5以IE的实例为基础制订了拖放规范。

案例

• 一个简单的拖拉

通过div添加draggable属性为true之后，我们已经可以进行简单的拖动了。那么拖动已经是可以拖动了，我们需要另一个地方来接收拖动，所以我们对代码做了些修改

• 来回拖动案例

需要注意的点

1.需要设置要移动属性draggable的属性值为true才支持拖拽
2.dataTransfer.setData设置了被拖动的数据类型和值
3.dataTransfer.getData("Text") 方法获得被拖的数据。
4.当放置被拖数据时，会发生 drop 事件，调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）。

API

• 拖动前

draggable元素是否可拖拽
- true 可拖拽
- false 不可拖拽
- auto 跟随浏览器定义是否可以拖拽

• 绑定在拖拽目标

dragstart()
- 当用户开始拖拽一个元素或者一个文本选取区块的时触发
drag()
- 当用户正在拖拽一个元素或者一个文本选取区块的时触发
dragend()
- 当用户结束拖拽一个元素或者一个文本选取区块的时触发

• 绑定在放置目标

dragenter	
- 当一个元素或文字选取区块被拖曳移动进入一个有效的放置目标时触发
dragover	
- 当一个元素或文字选取区块被拖曳移动经过一个有效的放置目标时触发
dragleave	
- 当一个元素或文字选取区块被拖曳移动离开一个有效的放置目标时触发
dragexist	
- 当一个元素不再是被选取中的拖曳元素时触发
drop	
-当一个元素或文字选取区块被放置至一个有效的放置目标时触发

• DataTransfer对象

属性
- types 
只读属性。它返回一个我们在dragstart事件中设置的拖动数据格式的数组。 格式顺序与拖动操作中包含的数据顺序相同。
- files
返回拖动操作中的文件列表。包含一个在数据传输上所有可用的本地文件列表。如果拖动操作不涉及拖动文件，此属性是一个空列表。
- dropEffect
获取当前选定的拖放操作的类型或将操作设置为新类型[none、move、copy、link]
- effectAllowed
指定拖放操作所允许的效果[none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized]

方法
void setData(format, data)
- 将拖动操作的拖动数据设置为指定的数据和类型。format可以是MIME类型
String getData(format)	
- 返回指定格式的数据，format与setData()中一致
void clearData([format])	
- 删除给定类型的拖动操作的数据。如果给定类型的数据不存在，此方法不执行任何操作。如果不给定参数，则删除所有类型的数据。
void setDragImage(img, x, y)	
- 指定一副图像，当拖动发生时，显示在光标下方。大多数情况下不用设置，因为被拖动的节点被创建成默认图片。x,y参数分别指示图像的水平、垂直偏移量

兼容性

总结

简单几行代码就实现简单拖拽效果，如果不使用原生drop要实现拖拽效果需要比较复杂，兼容性方面的问题也没有特别大的问题（IE除外），相信在今后的工作中会有机会用到。当然在使用过程中也遇到一个问题，当放置被拖数据时，会发生 drop 事件，调用 preventDefault来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开），如果不使用preventDefault，则不会触发drop事件，则拖拽就不会触发。

随着互联网+的深入发展，我们已经越来越感受到它的强大，HTML5也随着互联网火了半边天，微信小程序、虚拟现实已经走进了我们生活，这又引发了一次互联网发展高潮。现在互联网企业对高端HTML5开发工程师的缺口依然很大，因此很多人抓住这个机会选择学习HTML5开发。今天千锋南京HTML5培训小编将带大家一起看一看HTML5有哪些知识需要你了解？准备入门HTML5的新手需要了解的知识有哪些？

HTML5到底是什么？

一般广义而言的HTML5则包含了HTML、CSS和JavaScript三个部分，而不只是第一印象仅仅HTML部分而已，在CSS 3和JavaScript层面也有许多的创新，让整个网页从布局到处理都更加给力，新囊括的技术让之前实现相当困难且安全性危机重重的功能变为了现实，

HTML5好处-为什么要用HTML5

HML5在布局上更得体，记得以前的主流table过渡到主流div;今的布局对搜索引擎更加友好，比如<article>内总是会包含文章内容，而nav是导航信息;HTML5的移动手机支持也日趋完善，兼容移动端可是一个简单概念。虽然多网合一，兼容问题永远存在，布局适配也是一门技术活;另外在Pad等其他客户端也发挥着越来越重要的优势。

HTML5的技术组成：

离线功能

HTML5透过JavaScript提供了数种不同的离线储存功能，相对于传统的Cookie而言有更好的弹性以及架构，并且可以储存更多的内容。

WebStorage – 比Cookies更大、更有弹性的的储存

Web SQL Database – 本地端的SQL资料库

Indexed DB – Key-value的本地资料库

Application Cache – 将部分常用的网页内容cache起来

即时通讯

以往网站由于HTTP协定以及浏览器的设计，即时的互动性相当的受限，只能使用一些技巧来「模拟」即时的通讯效果，但HTML5提供了完善的即时通讯支援。

什么轮询、第三方的统统不要，自已来实现。

WebSocket – 即时的socket连线

Web Workers – 以往JavaScript都是single thread，透过Worker可以有多个运算

Notifications – 塬生的提示讯息，类似像OS X的Growl提示

文件以及硬件支持

不知道大家有没有发现，在Gmail等新的网页程式当中，已经可以透过拖拉的方式将档案作为邮件附件?这就是这部份HTML5档案的功能中的Drag’n Drop和File API。

Drag’n Drop – HTML元素的拖拉

File API – 读取使用者本机电脑的内容

Geolocation – 地理定位

Device orientation – 手持装置的方向

Speech input – 语音输入

语意化

语意化的网路是可以让电脑能够更加理解网页的内容，对于像是搜寻引擎的优化(SEO)或是推荐系统可以有很大的帮助。

New tags – 新的标籤，像是<header>、<section>等

Application tags – 也是新的标籤，像是<meter>、<progress>等

Microdata – 加入语意的资料让搜寻引擎等网站可以正确显示

Form type – <form>可以加入的type便多了，包含email和tel等属性，浏览器会协助进行资料格式的验证

多媒体

Audio、Video的标签支援以及Canvas的功能应该是大家对于HTML5最熟悉的部份了，也是许多人认为Flash会被取代的主要原因。

Audio video – 影片和音乐的塬生播放支援

Canvas – 2D的绘图功能支援

Canvas 3D – 3D的绘图功能支援

SVG – 向量图支援

CSS 3

CSS3支援了字体的嵌入、版面的排版，以及最令人印象深刻的动画功能。

Selector – 更有弹性的选择器

Webfonts – 嵌入式字体

Layout – 多样化的排版选择

Stlying radius gradient shadow – 圆角、渐层、阴影

Border background – 边框的背景支援

Transition – 元件的移动效果

Transform – 元件的变形效果

Animation – 将移动和变形加入动画支援

JavaScript

在比较JavaScript的基本面也新增了DOM的API、和浏览器上下页的纪录修改。

DOM API – 更方便的查询DOM元件

History API – 浏览器的上下页内容修改，方便AJAX可以保留浏览记录

现在就用HTML5

截至目前而言，主流的网页浏览器Firefox 5、Chrome 12和Safari 5都已经支援了许多的HTML5标準，而且目前最新版的IE 9也支援了许多HTML5标準。随着使用者陆续升级到新版的浏览器，开发者应该在现在就可以着手开发!兼容性问题会随着时间的推移而越来越少。但对于不得不照顾底版本用户的网站，网上也有大量的回退解决方案。

以上就是千锋南京HTML5培训小编今天给大家带来的新手入门HTML5需要了解的知识，希望本篇文章能够对你有所帮助。想了解更多HTML5相关资讯欢迎关注千锋南京官网，这里不仅有更多HTML5相关信息，还有专业的HTML5技术文章、教程视频。