HTML5如何實現(xiàn)多個元素的拖放功能

本篇文章為大家展示了HTML5如何實現(xiàn)多個元素的拖放功能，代碼簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

成都創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站設(shè)計、成都網(wǎng)站制作與策劃設(shè)計,正寧網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:正寧等地區(qū)。正寧做網(wǎng)站價格咨詢:028-86922220

話不多說，我們直接看示例

示例一：使用UL標(biāo)記拖放多個元素

代碼如下：

ListDragDrop.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="ListDragDrop.css"/>
  <script>
    function load() {      
      var delbox = document.getElementById('del');
      delbox.addEventListener('dragover', onDragOver, false);
      delbox.addEventListener('drop', onDrop, false);      
      var elems = document.querySelectorAll('ul#list1 > li');      
      for (var i = 0; i < elems.length; i++) {
        el = elems[i];
        el.setAttribute('draggable', 'true');
        el.addEventListener('dragstart', onDragStart, false);
      }
    }    
function onDragStart(e) {
      e.dataTransfer.effectAllowed = 'copy';
      e.dataTransfer.setData('text', this.id);
    }    
function onDragOver(e) {
      e.preventDefault();
    }    
function onDrop(e) {
      if (e.stopPropagation) e.stopPropagation();      
      var eid = e.dataTransfer.getData('text');      
      var elem = document.getElementById(eid);
      elem.parentNode.removeChild(elem);
    }  
</script>
</head>
<body onload="load();">
   <div id="del">刪除</div>
    <ul id="list1">
      <li id="1">海豚</li>
      <li id="2">鯨魚</li>
      <li id="3">企鵝</li>
      <li id="4">北極熊</li>
      <li id="5">雪狐</li>
    </ul>
    </ul>
</body>
</html>

ListDragDrop.css

#del{
  width:120px;  
  height:60px;  
  border: solid 2px #ff6a00;
  }
ul#list1 > li {
  display: block;  
  width: 150px;  
  border: 1px solid #808080;
  }

說明：

加載頁面時執(zhí)行加載功能。load函數(shù)中的以下代碼將dragover和drop事件分配給[Delete]的div。當(dāng)元素被拖動到Delete框時，會調(diào)用onDragOver函數(shù)，當(dāng)它被刪除時，會調(diào)用onDrop函數(shù)。

var delbox = document.getElementById('del');
  delbox.addEventListener('dragover', onDragOver, false);
  delbox.addEventListener('drop', onDrop, false);

調(diào)用querySelectorAll方法以獲取ul標(biāo)記中的li元素。for循環(huán)反復(fù)處理中獲取的元素數(shù)組，并將每個元素的“draggable”屬性設(shè)置為true。此過程將其設(shè)置為可拖動對象。它還分配了一個dragstart事件。

var elems = document.querySelectorAll('ul#list1 > li');  
for (var i = 0; i < elems.length; i++) {
    el = elems[i];
    el.setAttribute('draggable', 'true');
    el.addEventListener('dragstart', onDragStart, false);
  }

拖動列表項時，將調(diào)用以下onDragStart函數(shù)。調(diào)用dataTransfer對象的setData方法以在dataTransfer對象中存儲元素的ID。

function onDragStart(e) {
      e.dataTransfer.effectAllowed = 'copy';
      e.dataTransfer.setData('text', this.id);
    }

當(dāng)在拖放區(qū)域中拖動列表中的項目時，將調(diào)用以下onDragOver函數(shù)。由于DragOver沒有特別的處理，因此它調(diào)用PreventDefault方法來取消事件。

function onDragOver(e) {
      e.preventDefault();
    }

如果列表的項目在拖放區(qū)域內(nèi)被刪除，則可以調(diào)用onDrop函數(shù)。調(diào)用stopPropagation方法取消事件的處理。然后，我們從dataTransfer對象中獲取ID。通過取得ID，您可以獲得丟棄區(qū)域中丟棄的元素。調(diào)用getElementById方法并從ID中獲取LI標(biāo)記的對象。通過使用獲取的LI對象的paerntNode屬性訪問父節(jié)點(diǎn)，調(diào)用removeChild方法，刪除被丟棄的列表的項目。

function onDrop(e) {      
if (e.stopPropagation) e.stopPropagation();      
var eid = e.dataTransfer.getData('text');      
var elem = document.getElementById(eid);
      elem.parentNode.removeChild(elem);
    }

運(yùn)行結(jié)果：

使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。

HTML5如何實現(xiàn)多個元素的拖放功能

可以拖動頁面底部列表中的項目。比如拖動“企鵝”這一項，將其拖動到刪除區(qū)域，然后下面列表項中就沒有第三項“企鵝”了，具體效果如下圖所示

HTML5如何實現(xiàn)多個元素的拖放功能

拖動其他項都是一樣的效果，五項都可以刪除。

上述內(nèi)容就是HTML5如何實現(xiàn)多個元素的拖放功能，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前標(biāo)題：HTML5如何實現(xiàn)多個元素的拖放功能
轉(zhuǎn)載來于：http://chinadenli.net/article26/ppgdjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、網(wǎng)頁設(shè)計公司、App開發(fā)、網(wǎng)站內(nèi)鏈、外貿(mào)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

HTML5如何實現(xiàn)多個元素的拖放功能