溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關如何使用HTML5實現網頁元素的拖放操作，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
場景：
如下圖所示，我們要實現：
通過拖放將照片從左側“相冊”區域拖拽到右側“垃圾箱”區域；拖拽過程中，“溫馨提示”部分要及時提醒，當前正在進行拖放操作；
實現方法：
如上界面的HTML代碼比較簡單，如下：
代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5實現拖拽操作</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">
<h3>溫馨提示：可將照片直接拖到垃圾箱中</h3>
</div>
<div id="album" class="album">
<h3>相冊</h3>
<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">
<h3>垃圾箱</h3>
</div>
<br/>
</body>
</html>
注意：如果要實現拖放操作，需要在待拖放的元素上增加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);
//拖放操作結束
dragImg.ondragend = function(e){
//恢復提醒信息
info.innerHTML="<h3>溫馨提示：可將照片直接拖到垃圾箱中</h3>";
};
e.dataTransfer.setData("text",dragImgId);
};
//拖放過程中
src.ondrag = function(e){
info.innerHTML="<h3>--照片正在被拖動--</h3>";
}
//獲得拖放的目標元素
var target = document.getElementById("trash");
//關閉默認處理；
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中刪除該照片的節點
oldElem.parentNode.removeChild(oldElem);
//將被拖動的照片DOM節點添加到垃圾桶DIV中；
target.appendChild(oldElem);
info.innerHTML="<h3>溫馨提示：可將照片直接拖到垃圾箱中</h3>";
e.preventDefault();
}
}
</script>
關于“如何使用HTML5實現網頁元素的拖放操作”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
