html5拖曳操作 HTML5實現(xiàn)網(wǎng)頁元素的拖放操作_HTML5教程
推薦：HTML5引入的新數(shù)組TypedArray介紹Javascript中的數(shù)組是個強(qiáng)大的家伙：你可以創(chuàng)建的時候不規(guī)定長度，而是動態(tài)的去改變長度。你可以把他當(dāng)成普通的數(shù)組去讀取，也可以當(dāng)他是堆棧來使用。你可以改變數(shù)組中每個元素的值甚至是類型
HTML5之前，要實現(xiàn)網(wǎng)頁元素的拖放操作，需要依靠mousedown、mousemove、mouseup等API，通過大量的JS代碼來實現(xiàn)；HTML5中引入了直接支持拖放操作的API，大大簡化了網(wǎng)頁元素的拖放操作編程難度，并且這些API除了支持瀏覽器內(nèi)部元素的拖放外，同時支持瀏覽器和其它應(yīng)用程序之間的數(shù)據(jù)互相拖動。
本文通過一個簡單示例，演示HTML5中拖放API的使用方法。
場景：
如下圖所示，我們要實現(xiàn)：
通過拖放將照片從左側(cè)“相冊”區(qū)域拖拽到右側(cè)“垃圾箱”區(qū)域；拖拽過程中，“溫馨提示”部分要及時提醒，當(dāng)前正在進(jìn)行拖放操作；
實現(xiàn)方法：
如上界面的HTML代碼比較簡單，如下：
復(fù)制代碼 代碼如下:m.hl5o.cn
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5實現(xiàn)拖拽操作</title>
<meta charset="utf-8"/>
<style>
.album
{
border: 3px dashed #ccc;
float: left;
margin: 10px;
min-height: 100px;
padding: 10px;
width: 220px;
}
</style>
</head>
<body">
<div id="info">
<h2>溫馨提示：可將照片直接拖到垃圾箱中</h2>
</div>
<div id="album" class="album">
<h2>相冊</h2>
<img draggable="true" id="img1" src="img/bg_01.png" />
<img draggable="true" id="img2" src="img/bg_02.png" />
<img draggable="true" id="img3" src="img/bg_03.png" />
</div>
<div id="trash" class="album">
<h2>垃圾箱</h2>
</div>
<br/>
</body>
</html>
注意：如果要實現(xiàn)拖放操作，需要在待拖放的元素上增加draggable="true"屬性；
接下來，再在onload事件中增加如下JS代碼即可，注釋比較詳盡，就不再單獨解釋。
復(fù)制代碼 代碼如下:m.hl5o.cn
<script>
function init(){
var info = document.getElementById("info");
//獲得被拖放的元素，本示例為相冊所在的DIV
var src = document.getElementById("album");
//開始拖放操作
src.ondragstart = function (e) {
//獲得被拖放的照片ID
var dragImgId = e.target.id;
//獲得被拖動元素
var dragImg = document.getElementById(dragImgId);
//拖放操作結(jié)束
dragImg.ondragend = function(e){
//恢復(fù)提醒信息
info.innerHTML="<h2>溫馨提示：可將照片直接拖到垃圾箱中</h2>";
};
e.dataTransfer.setData("text",dragImgId);
};
//拖放過程中
src.ondrag = function(e){
info.innerHTML="<h2>--照片正在被拖動--</h2>";
}
//獲得拖放的目標(biāo)元素
var target = document.getElementById("trash");
//關(guān)閉默認(rèn)處理；
target.ondragenter = function(e){
e.preventDefault();
}
target.ondragover = function(e){
e.preventDefault();
}
//有東西拖放到了目標(biāo)元素
target.ondrop = function (e) {
var draggedID = e.dataTransfer.getData("text");
//獲取相冊中的DOM對象
var oldElem = document.getElementById(draggedID);
//從相冊DIV中刪除該照片的節(jié)點
oldElem.parentNode.removeChild(oldElem);
//將被拖動的照片DOM節(jié)點添加到垃圾桶DIV中；
target.appendChild(oldElem);
info.innerHTML="<h2>溫馨提示：可將照片直接拖到垃圾箱中</h2>";
e.preventDefault();
}
}
</script>
實現(xiàn)效果：
分享：HTML5 語音搜索(淘寶店語音搜素)Html5支持語音搜索，可惜的是只有webkit核心的瀏覽器才能使用用法很簡單，只需要在input添加屬性x-webkit-speech即可,感興趣的朋友可以了解下
相關(guān)HTML5教程：
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網(wǎng)易微博Web App用HTML5開發(fā)的過程介紹
- HTML5 對各個標(biāo)簽的定義與規(guī)定：body的介紹
- 關(guān)于HTML5的安全問題開發(fā)人員需要牢記的
- 關(guān)于HTML5的22個初級技巧(圖文教程)
- 開發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數(shù)據(jù)庫的SQL語句的使用方法
- HTML5實踐-圖片設(shè)置成灰度圖
- HTML5安全介紹之內(nèi)容安全策略（CSP）簡介
- HTML5 Web存儲方式的localStorage和sessionStorage進(jìn)行數(shù)據(jù)本地存儲案例應(yīng)用
- Bootstrap 學(xué)習(xí)分享
- input元素的url類型和email類型簡介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- html5與css3小應(yīng)用
- HTML5之WebGL 3D概述(上)—WebGL原生開發(fā)開啟網(wǎng)頁3D渲染新時代
- html5 canvas里繪制橢圓并保持線條粗細(xì)均勻的技巧
- html5 Canvas畫圖教程(7)—canvas里畫曲線之quadraticCurveTo方法
- html5 canvas-2.用canvas制作一個猜字母的小游戲
- Bootstrap 學(xué)習(xí)分享
- HTML5教程之html 5 本地數(shù)據(jù)庫（Web Sql Database）
- html5 Canvas畫圖教程(8)—canvas里畫曲線之bezierCurveTo方法
- HTML5 新舊語法標(biāo)記對我們有什么好處
- html5 Canvas畫圖教程(4)—未閉合的路徑及漸變色的填充方法
- 相關(guān)鏈接：
- 教程說明：
HTML5教程-html5拖曳操作 HTML5實現(xiàn)網(wǎng)頁元素的拖放操作
。