html5拖曳操作 HTML5實現(xiàn)網(wǎng)頁元素的拖放操作
發(fā)布時間：2013-01-02 08:46:32 作者：佚名 
我要評論
我要評論HTML5之前，要實現(xiàn)網(wǎng)頁元素的拖放操作，需要依靠mousedown、mousemove、mouseup等API，通過大量的JS代碼來實現(xiàn),而如今html5大大簡化了網(wǎng)頁元素的拖放操作編程難度,API除了支持瀏覽器內(nèi)部元素的拖放外，同時支持瀏覽器和其它應(yīng)用程序之間的數(shù)據(jù)互相拖動
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ū)域；拖拽過程中，“溫馨提示”部分要及時提醒，當前正在進行拖放操作；
實現(xiàn)方法：
如上界面的HTML代碼比較簡單，如下：
復制代碼
代碼如下:<!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代碼即可，注釋比較詳盡，就不再單獨解釋。
復制代碼
代碼如下:<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){
//恢復提醒信息
info.innerHTML="<h2>溫馨提示：可將照片直接拖到垃圾箱中</h2>";
};
e.dataTransfer.setData("text",dragImgId);
};
//拖放過程中
src.ondrag = function(e){
info.innerHTML="<h2>--照片正在被拖動--</h2>";
}
//獲得拖放的目標元素
var target = document.getElementById("trash");
//關(guān)閉默認處理；
target.ondragenter = function(e){
e.preventDefault();
}
target.ondragover = function(e){
e.preventDefault();
}
//有東西拖放到了目標元素
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)效果：
相關(guān)文章
- 拖放是一種常見的特性，即抓取對象以后拖到另一個位置，在 HTML5 中，拖放是標準的組成部分。在HTML5中用戶可以使用鼠標選擇一個可拖動元素，將元素拖動到一個可放置元素，2017-08-23
- 這篇文章主要為大家詳細介紹了HTML5拖放功能的相關(guān)資料，如何實現(xiàn)HTML5拖放效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-13
- HTML5 中提供了直接拖放的 API，極大的方便我們實現(xiàn)拖放效果，不需要去寫一大堆的 js，只需要通過監(jiān)聽元素的拖放事件就能實現(xiàn)各種拖放功能。2017-05-11
- 這篇文章主要為大家詳細介紹了HTML5拖放效果的實現(xiàn)代碼，拖放即抓取對象以后拖到另一個位具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-17
- 大家都知道拖放是一種常見的特性，即抓取對象以后拖到另一個位置。在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。拖放是在“拖放源（drag source）”和“拖放目標2016-11-14
- 拖放是一種常見的特性，即抓取對象以后拖到另一個位置。這篇文章主要介紹了HTML5 拖放功能實現(xiàn)代碼，感興趣的小伙伴們可以參考一下2016-07-14
HTML5+CSS3實現(xiàn)拖放(Drag and Drop)示例
這篇文章主要為大家介紹了HTML5+CSS3實現(xiàn)拖放(Drag and Drop)的實現(xiàn)方法,需要的朋友可以參考下2014-07-07HTML5 form標簽之解放表單驗證、增加文件上傳、集成拖放的使用方法
本篇文章小編為大家介紹，HTML5 form標簽之解放表單驗證、增加文件上傳、集成拖放的使用方法。需要的朋友參考下2013-04-24- 調(diào)用 preventDefault() 來避免瀏覽器對數(shù)據(jù)的默認處理(drop 事件的默認行為是以鏈接形式打開)通過 dataTransfer.getData(Text) 方法獲得被拖的數(shù)據(jù)，感興趣的朋友可以參考2013-03-29
HTML5中實現(xiàn)拖放效果無須借助javascript
不使用javascript實現(xiàn)拖放效果,一直以來都是網(wǎng)友們所希望看到的,二今天html5卻做到了接下來詳細為您介紹，需要了解的朋友可以參考下2012-12-26