怎么用HTML5+CSS3实现拖放功能

这篇文章主要介绍“怎么用HTML5+CSS3实现拖放功能”，在日常操作中，相信很多人在怎么用HTML5+CSS3实现拖放功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用HTML5+CSS3实现拖放功能”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

你所需要的网站建设服务，我们均能行业靠前的水平为你提供.标准是产品质量的保证，主要从事成都网站设计、成都网站建设、企业网站建设、手机网站开发、网页设计、品牌网站制作、网页制作、做网站、建网站。创新互联拥有实力坚强的技术研发团队及素养的视觉设计专才。

本文简单介绍一下HTML5的拖放实现。
拖放（Drag 和 drop）是 HTML5 标准的组成部分。
浏览器支持:Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

被拖元素，dragElement :
(1)添加事件：ondragstart
(2)添加属性：dragable

放置元素，dropElement:
1、添加事件：ondargenter , ondragover , ondragleave , ondragend ,ondrop
和mouser划入划出一类的事件很类似，字面也很好理解，不赘述了，下面会用例子来说明。

2、页面上元素间的拖放
下面用个小例子，div间的拖放来展示，各个事件如何被触发：

代码如下:

   
   
   
   
   

系统中选择的一个或多个文件拖入该div中，files中会存储拖入文件的信息，然后我们通过file可以得到文件的类型，长度，内容然后实现上传。

3、setDragImage(image, x, y)用于设置鼠标移动过程中随鼠标一起移动的效果图。必须在dragstart中设置。

4、types,effectAllowed和dropEffect分别是拖入元素的类型，拖拽过程中鼠标显示的样式，不过通常可以忽略这几个属性，一般用不到。

到此，关于“怎么用HTML5+CSS3实现拖放功能”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

网站栏目：怎么用HTML5+CSS3实现拖放功能
分享URL：http://6mz.cn/article/gjjhpe.html