html5拖曳操作 HTML5實現(xiàn)網(wǎng)頁元素的拖放操作

2020-03-24 18:50:39

字體：大中小

供稿：網(wǎng)友

HTML5之前，要實現(xiàn)網(wǎng)頁元素的拖放操作，需要依靠mousedown、mousemove、mouseup等API，通過大量的JS代碼來實現(xiàn)；HTML5中引入了直接支持拖放操作的API，大大簡化了網(wǎng)頁元素的拖放操作編程難度，并且這些API除了支持瀏覽器內(nèi)部元素的拖放外，同時支持瀏覽器和其它html' target='_blank'>應(yīng)用程序之間的數(shù)據(jù)互相拖動。本文通過一個簡單示例，演示HTML5中拖放API的使用方法。場景：如下圖所示，我們要實現(xiàn)：通過拖放將照片從左側(cè) 相冊區(qū)域拖拽到右側(cè) 垃圾箱區(qū)域；拖拽過程中，溫馨提示部分要及時提醒，當前正在進行拖放操作；
實現(xiàn)方法：如上界面的HTML代碼比較簡單，如下：

復(fù)制代碼代碼如下:
!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"
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"
h2 垃圾箱 /h2
/div
br/
/body
/html

注意：如果要實現(xiàn)拖放操作，需要在待拖放的元素上增加draggable= true 屬性；接下來，再在onload事件中增加如下JS代碼即可，注釋比較詳盡，就不再單獨解釋。

復(fù)制代碼代碼如下:
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
}
//獲得拖放的目標元素
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)效果：html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：再談前端HTML模板技術(shù)

下一篇：HTML實現(xiàn)搶票功能(設(shè)定時間打開搶票的頁面)