HTML5新增属性之拖拽属性（介绍）

本文给大家介绍HTML5新增属性中的拖拽属性，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

HTML5新增的许多属性：

o文件类型声明（）仅有一型：。

o新的解析顺序：不再基于SGML。

o新的元素：section, video, progress,nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption,figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source,summary, wbr。

oinput元素的新类型：date,email, url等等。

o新的属性：ping（用于a与area）,charset（用于meta）, async（用于script）。

o全域属性：id, tabindex, repeat。

o新的全域属性：contenteditable,contextmenu, draggable, dropzone, hidden, spellcheck。

o移除元素：acronym, applet,basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike,tt。

下面我们就可是介绍HTML5新增属性中的拖拽属性吧。

DataTransfer对象：拖拽对象用来传递的媒介，一般为Event.dataTransfer

Draggable属性:顾名思义，被拖拽的元素需要设置draggable=true,否则不会有效果

DataTransfer属性和类型

ondragstart事件: 当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖拽元素上

ondragenter事件：当拖拽元素进入目标元素时候触发的事件，此事件作用在目标元素上

ondragover事件：当拖拽元素穿过目标元素时候触发的事件，此事件作用在目标元素上

ondrop事件：当拖拽元素在目标元素上同时放开鼠标时触发的时候，此事件作用在目标元素上

ondragend事件：当拖拽完成时触发的事件，此事件作用在被拖拽元素上

Event.preventDefault()方法：阻止默认事件方法等的执行。在ondrop中一定要执行preventDefault，否则ondrop事件不会被触发。另外，如果是从其他应用软件或者文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或者是相关信息，并不是真的执行drop。此时需要用document的ondragover事件替代

Event.effectAllowed属性：拖拽效果，取值有：

None，copy，copyLink，copyMove，link，linkMove，move，all，uninitialized(default)

事件触发顺序

ondragstart->ondragenter->ondragover->ondrop->ondragend

Demo

box从右边拖到container中后，box在右边消失，container中添加了被拖拽的box。

右边的box是可排序的。

代码

 
 container 
 
 
box-1
 
box-2
 
box-3
 
box-4
 
box-5
 
box-6
 
box-7
 
 
 

还看到了一些html5的新属性就写在文章末尾吧

      
       
Fiona
  browsers:   
  download with download   download without download  
   
  click me   
  
  
  
         
   

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问Html5视频教程！

相关推荐：

php公益培训视频教程

HTML5图文教程

HTML5在线手册

html5特效代码大全

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!