溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何使用HTML5實(shí)現(xiàn)網(wǎng)頁元素的拖放操作

發(fā)布時(shí)間：2021-10-11 09:30:19 來源：億速云 閱讀：167 作者：小新 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)如何使用HTML5實(shí)現(xiàn)網(wǎng)頁元素的拖放操作，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

場(chǎng)景：

如下圖所示，我們要實(shí)現(xiàn)：

通過拖放將照片從左側(cè)“相冊(cè)”區(qū)域拖拽到右側(cè)“垃圾箱”區(qū)域；拖拽過程中，“溫馨提示”部分要及時(shí)提醒，當(dāng)前正在進(jìn)行拖放操作；

如何使用HTML5實(shí)現(xiàn)網(wǎng)頁元素的拖放操作

實(shí)現(xiàn)方法：

如上界面的HTML代碼比較簡單，如下：

代碼如下:


<!DOCTYPE HTML>
<html>
<head>
   <title>HTML5實(shí)現(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">
       <h3>溫馨提示：可將照片直接拖到垃圾箱中</h3>
   </div>
   <div id="album" class="album">
       <h3>相冊(cè)</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>


注意：如果要實(shí)現(xiàn)拖放操作，需要在待拖放的元素上增加draggable="true"屬性；

接下來，再在onload事件中增加如下JS代碼即可，注釋比較詳盡，就不再單獨(dú)解釋。

代碼如下:


   <script>
       function init(){
           var info = document.getElementById("info");
           //獲得被拖放的元素，本示例為相冊(cè)所在的DIV
           var src = document.getElementById("album");
           //開始拖放操作
           src.ondragstart = function (e) {
               //獲得被拖放的照片ID
               var dragImgId = e.target.id;
               //獲得被拖動(dòng)元素
               var dragImg = document.getElementById(dragImgId);
               //拖放操作結(jié)束
               dragImg.ondragend = function(e){
                   //恢復(fù)提醒信息
                   info.innerHTML="<h3>溫馨提示：可將照片直接拖到垃圾箱中</h3>";
               };
               e.dataTransfer.setData("text",dragImgId);
           };
           //拖放過程中
           src.ondrag = function(e){  
               info.innerHTML="<h3>--照片正在被拖動(dòng)--</h3>";
           }
           //獲得拖放的目標(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");
               //獲取相冊(cè)中的DOM對(duì)象
               var oldElem = document.getElementById(draggedID);
               //從相冊(cè)DIV中刪除該照片的節(jié)點(diǎn)
               oldElem.parentNode.removeChild(oldElem);
               //將被拖動(dòng)的照片DOM節(jié)點(diǎn)添加到垃圾桶DIV中；
               target.appendChild(oldElem);
               info.innerHTML="<h3>溫馨提示：可將照片直接拖到垃圾箱中</h3>";
               e.preventDefault();
           }
       }
   </script>

關(guān)于“如何使用HTML5實(shí)現(xiàn)網(wǎng)頁元素的拖放操作”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手