整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
要為大家詳細(xì)介紹了HTML5拖放效果的實現(xiàn)代碼，拖放即抓取對象以后拖到另一個位置。感興趣的小伙伴們可以參考一下:
在 HTML5 中，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放。
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖動。但 Safari 5.1.2不支持拖動。
下面看看實現(xiàn)效果：
拖拽前
拖拽后
代碼實現(xiàn)：
把draggable屬性設(shè)置為true ，才能使元素可拖動。
然后，規(guī)定當(dāng)元素被拖動時，會發(fā)生什么。
在上面的例子中，ondragstart 屬性調(diào)用了一個函數(shù)，drag(event)，它規(guī)定了被拖動的數(shù)據(jù)。
dataTransfer.setData() 方法設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值：
在這個例子中，數(shù)據(jù)類型是 "Text"，值是可拖動元素的 id ("drag1")。
ondragover 事件規(guī)定在何處放置被拖動的數(shù)據(jù)。
默認(rèn)地，無法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置，我們必須阻止對元素的默認(rèn)處理方式。
這要通過調(diào)用 ondragover 事件的 event.preventDefault() 方法：event.preventDefault()
當(dāng)放置被拖數(shù)據(jù)時，會發(fā)生 drop 事件。
在上面的例子中，ondrop 屬性調(diào)用了一個函數(shù)，drop(event)：
調(diào)用 preventDefault() 來避免瀏覽器對數(shù)據(jù)的默認(rèn)處理（drop 事件的默認(rèn)行為是以鏈接形式打開）
通過 dataTransfer.getData("Text") 方法獲得被拖的數(shù)據(jù)。該方法將返回在 setData() 方法中設(shè)置為相同類型的任何數(shù)據(jù)。
被拖數(shù)據(jù)是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目標(biāo)元素）中
若要實現(xiàn)來回拖動：
若要在兩個地方來回拖動，只需將上面代碼稍作修改就行了.將body中的代碼改成:
然后在style樣式中加上#div2就可以了：
也是一個小菜鳥，一次在做練習(xí)時遇到一個問題，就是在html5頁面中嵌入視頻的時候頁面中只顯示聲音卻不顯示圖像。HTML5中并沒有指定視頻解碼器，它留給了瀏覽器來決定。雖然Safari和Internet Explorer9可以支持H.264格式(注：H.264是公認(rèn)的mp4的標(biāo)準(zhǔn)編碼)的視頻，F(xiàn)irefox和Opera是堅持開源Theora 和Vorbis格式。因此，指定HTML5的視頻時，你必須提供這兩種格式。剛開始我以為視頻的格式不對，我嵌入的視頻是mp4格式的，可是試了好多次結(jié)果都一樣，只有聲音不顯示圖像，以前從沒遇到過這種情況，瞬間懵了。后來上網(wǎng)查了查，才知道原來視頻不光區(qū)分格式，相同的格式的情況下還區(qū)分編碼。就拿mp4格式的視頻來說吧，mp4有3種編碼，mpg4(xdiv),mpg4(xvid)，avc(h264)，這三種格式雖然在播放器里可以正常播放，但是mpg(xdiv),mpg4(xvid)這兩種格式嵌到html5頁面里的時候就會出現(xiàn)上述我說的那種情況，轉(zhuǎn)換成H264編碼就可以網(wǎng)頁正常播放了。可是如何給我們的視頻轉(zhuǎn)碼(轉(zhuǎn)換編碼)呢？下面我就介紹一下如何使用格式工廠來轉(zhuǎn)碼(之所以我介紹用格式工廠來轉(zhuǎn)碼是因為我覺得格式工廠的功能太強(qiáng)大了，不僅能轉(zhuǎn)換視頻的格式還可以剪輯視頻、音頻，竟然還可以轉(zhuǎn)換視頻的編碼，集多功能于一身)：對于擴(kuò)展名相同的視頻文件它們的視頻的編碼可能是不一樣的，如mp4格式的視頻的編碼就可能是mpg4(xdiv)或mpg4(xvid)或avc(h264)，在用格式工廠軟件進(jìn)行視頻轉(zhuǎn)換時可以設(shè)置視頻的編碼格式，使視頻可以讓不同的播放器打開。
第一步：打開格式工廠軟件，這里我以把視頻轉(zhuǎn)換為mp4格式為例說明單擊[->mp4]按鈕
頁面需默認(rèn)用極速核，增加標(biāo)簽：
<meta name="renderer" content="webkit">
若頁面需默認(rèn)用ie兼容內(nèi)核，增加標(biāo)簽：
<meta name="renderer" content="ie-comp">
若頁面需默認(rèn)用ie標(biāo)準(zhǔn)內(nèi)核，增加標(biāo)簽：
<meta name="renderer" content="ie-stand">
<!-- 字體編碼 -->
<meta charset="utf-8" />
<!-- 關(guān)鍵字 -->
<meta name="keywords" content="" />
<!-- 說明 -->
<meta name="description" content="" />
<!-- 作者 -->
<meta name="author" content="" />
<!-- 設(shè)置文檔寬度、是否縮放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<!-- 優(yōu)先使用IE最新版本或chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 360讀取到這個標(biāo)簽立即錢換到極速模式 -->
<meta name="renderer" content="webkit" />
<!-- 禁止百度轉(zhuǎn)碼 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- UC強(qiáng)制豎屏 -->
<meta name="screen-orientation" content="portrait" />
<!-- QQ強(qiáng)制豎屏 -->
<meta name="x5-orientation" content="portrait" />
<!-- UC強(qiáng)制全屏 -->
<meta name="full-screen" content="yes" />
<!-- QQ強(qiáng)制全屏 -->
<meta name="x5-fullscreen" content="true" />
<!-- QQ應(yīng)用模式 -->
<meta name="x5-page-mode" content="app" />
<!-- UC應(yīng)用模式 -->
<meta name="browsermode" content="application">
<!-- window phone 點亮無高光 -->
<meta name="msapplication-tap-highlight" content="no" />
<!-- 安卓設(shè)備不自動識別郵件地址 -->
<meta name="format-detection" name="email=no" />
<!-- iOS設(shè)備 -->
<!-- 添加到主屏幕的標(biāo)題 -->
<meta name="apple-mobile-web-app-title" content="標(biāo)題" />
<!-- 是否啟用webApp全屏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 設(shè)置狀態(tài)欄的背景顏色，啟用webapp模式時生效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent/black/default" />
<!-- 半透明/黑色/默認(rèn)白色 -->
<!-- 禁止數(shù)字識別為電話號碼 -->
<meta name="format-detection" content="telephone=no" />
<!--
iOS圖標(biāo)
iPhone/iTouch默認(rèn)是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啟動是不包含狀態(tài)欄的 -->
<!-- 標(biāo)準(zhǔn)分辨率：1、豎屏(768*1004)；2、橫屏(1024*748)
Retina:1、豎屏(1536*2008)；2、橫屏(2048*1496) -->
<!-- iPhone/iTouch啟動是包含狀態(tài)欄的 -->
<!-- 標(biāo)準(zhǔn)分辨率(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對應(yīng)的圖片大小是750×1294，iPhone 6 Plus 對應(yīng)的是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" />
<!--強(qiáng)制讓文檔的寬度與設(shè)備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽； -->
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<!-- iphone設(shè)備中的safari私有meta標(biāo)簽，它表示：允許全屏模式瀏覽；-->
<meta content="yes" name="apple-Mobile-web-app-capable" />
<!-- iphone的私有標(biāo)簽，它指定的iphone中safari頂端的狀態(tài)條的樣式；-->
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
