近在摸魚的過程中，發現了一個拖動組件，發現挺有意思的。于是想到在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技術文章、教程視頻。