HTML5新增屬性之拖曳屬性（介紹）

本文介紹HTML5新增屬性中的拖曳屬性，有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

HTML5新增的許多屬性：

o檔案類別型宣告（）#只有一個類型：。

o新的解析#順SGML

#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,否則不會有效果

ondragstart事件: 當拖曳元素開始被拖曳的候觸發的事件，此事件作用在被拖曳元素上

ondragenter事件：當拖曳元素#入目標元素時候觸發#的事件，此事件作用在目標元素上

ondragover事件：當拖曳元素穿過#目標記元素時候觸e的#事件，此事件作用在目標元素上

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特效代码大全

以上是HTML5新增屬性之拖曳屬性（介紹）的詳細內容。更多資訊請關注PHP中文網其他相關文章！