要為大家詳細介紹了HTML5拖放效果的實現代碼，拖放即抓取對象以后拖到另一個位置。感興趣的小伙伴們可以參考一下:

在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖動。但 Safari 5.1.2不支持拖動。

下面看看實現效果：

拖拽前

拖拽后

代碼實現：

把draggable屬性設置為true ，才能使元素可拖動。

然后，規定當元素被拖動時，會發生什么。

在上面的例子中，ondragstart 屬性調用了一個函數，drag(event)，它規定了被拖動的數據。

dataTransfer.setData() 方法設置被拖數據的數據類型和值：

在這個例子中，數據類型是 "Text"，值是可拖動元素的 id ("drag1")。

ondragover 事件規定在何處放置被拖動的數據。

默認地，無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。

這要通過調用 ondragover 事件的 event.preventDefault() 方法：event.preventDefault()

當放置被拖數據時，會發生 drop 事件。

在上面的例子中，ondrop 屬性調用了一個函數，drop(event)：

調用 preventDefault() 來避免瀏覽器對數據的默認處理（drop 事件的默認行為是以鏈接形式打開）

通過 dataTransfer.getData("Text") 方法獲得被拖的數據。該方法將返回在 setData() 方法中設置為相同類型的任何數據。

被拖數據是被拖元素的 id ("drag1")

把被拖元素追加到放置元素（目標元素）中

若要實現來回拖動：

若要在兩個地方來回拖動，只需將上面代碼稍作修改就行了.將body中的代碼改成:

然后在style樣式中加上#div2就可以了：

頁面需默認用極速核，增加標簽：

<meta name="renderer" content="webkit">

若頁面需默認用ie兼容內核，增加標簽：

<meta name="renderer" content="ie-comp">

若頁面需默認用ie標準內核，增加標簽：

<meta name="renderer" content="ie-stand">

<!-- 字體編碼 -->

<meta charset="utf-8" />

<!-- 關鍵字 -->

<meta name="keywords" content="" />

<!-- 說明 -->

<meta name="description" content="" />

<!-- 作者 -->

<meta name="author" content="" />

<!-- 設置文檔寬度、是否縮放 -->

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />

<!-- 優先使用IE最新版本或chrome -->

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<!-- 360讀取到這個標簽立即錢換到極速模式 -->

<meta name="renderer" content="webkit" />

<!-- 禁止百度轉碼 -->

<meta http-equiv="Cache-Control" content="no-siteapp" />

<!-- UC強制豎屏 -->

<meta name="screen-orientation" content="portrait" />

<!-- QQ強制豎屏 -->

<meta name="x5-orientation" content="portrait" />

<!-- UC強制全屏 -->

<meta name="full-screen" content="yes" />

<!-- QQ強制全屏 -->

<meta name="x5-fullscreen" content="true" />

<!-- QQ應用模式 -->

<meta name="x5-page-mode" content="app" />

<!-- UC應用模式 -->

<meta name="browsermode" content="application">

<!-- window phone 點亮無高光 -->

<meta name="msapplication-tap-highlight" content="no" />

<!-- 安卓設備不自動識別郵件地址 -->

<meta name="format-detection" name="email=no" />

<!-- iOS設備 -->

<!-- 添加到主屏幕的標題 -->

<meta name="apple-mobile-web-app-title" content="標題" />

<!-- 是否啟用webApp全屏 -->

<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- 設置狀態欄的背景顏色，啟用webapp模式時生效 -->

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent/black/default" />

<!-- 半透明/黑色/默認白色 -->

<!-- 禁止數字識別為電話號碼 -->

<meta name="format-detection" content="telephone=no" />

<!--

iOS圖標

iPhone/iTouch默認是57*57

iPad，72*72，可以沒有，但推薦有

Retina iPhone/Retina iTouch，114*114,可以沒有，但推薦有

Retina iPad,144*144,可以沒有，但推薦有

iPhone 6 plus是180*180，iPhone 6 是120*120

-->

<link rel="apple--touch-icon-precomposed" sizes="width*height" href="xxx.png" />

<!-- iOS啟動畫面 -->

<!-- iPad啟動是不包含狀態欄的 -->

<!-- 標準分辨率：1、豎屏(768*1004)；2、橫屏(1024*748)

Retina:1、豎屏(1536*2008)；2、橫屏(2048*1496) -->

<!-- iPhone/iTouch啟動是包含狀態欄的 -->

<!-- 標準分辨率(320*480)、Retina(640*960)、iPhone 5/iTouch 5(640*1136) -->

<link rel="apple-touch-startup-image" sizes="width*height" href="xxx.png" />

<!-- iPhone 6對應的圖片大小是750×1294，iPhone 6 Plus 對應的是1242×2148 -->

<link rel="apple-touch-startup-image" href="xxx.png" media="(device-width:375px)">

<link rel="apple-touch-startup-image" href="xxx.png" media="(device-width:414px)">

<!-- 智能添加廣告條 -->

<meta name="apple-itunes-app" content="app-id=myappstoreID,affiliate-data=myaffiliatedata,app-argument=myurl" />

<!--強制讓文檔的寬度與設備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽； -->

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

<!-- iphone設備中的safari私有meta標簽，它表示：允許全屏模式瀏覽；-->

<meta content="yes" name="apple-Mobile-web-app-capable" />

<!-- iphone的私有標簽，它指定的iphone中safari頂端的狀態條的樣式；-->

<meta content="black" name="apple-mobile-web-app-status-bar-style" />