简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  文章  >  web前端  >  如何使用HTML5實作拖放單一元素

如何使用HTML5實作拖放單一元素

不言
不言原創
2018-12-01 14:07:563628瀏覽

如何使用HTML5實作拖放單一元素？本篇文章將介紹給大家介紹實作拖放HTML元素的如何使用HTML5實作拖放單一元素程式碼，以下一起來看具體的實作內容。

如何使用HTML5實作拖放單一元素

透過使用HTML5的拖放功能，您可以拖放HTML頁面元素

我們來看具體的範例

程式碼如下

SimpleDragDrop.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="SimpleDragDrop.css" />
  <script>
    function load() {
      var box = document.querySelector(&#39;.box&#39;);
      box.addEventListener(&#39;dragstart&#39;, onDragStart, false);      
      var zone = document.querySelector(&#39;.dropzone&#39;);
      zone.addEventListener(&#39;dragover&#39;, onDragOver, false);
      zone.addEventListener(&#39;drop&#39;, onDrop, false);
   }    
function onDragStart(e) {
      e.dataTransfer.setData(&#39;text&#39;, this.id);
    }    
function onDragOver(e) {
      e.preventDefault();      
this.textContent = &#39;onDragOver&#39;;
    }    
function onDrop(e) {
      e.preventDefault();      
this.textContent = &#39;onDrop&#39;;
    }  
</script>
</head>
<body onload="load();">
  <div class="box" draggable="true"></div>
  <div id="dropzone" class="dropzone">
</div>
</body>
</html>

SimpleDragDrop.css

.box {
  width:32px;  
  height:32px;  
  border:solid 1px #002f9f;
}
.dropzone {
  margin-top:16px;  
  margin-bottom:16px;  
  width: 280px;  
  height: 64px;  
  border: solid 1px #808080;
}

說明：

<div class="box" draggable="true"></div>
  <div id="dropzone" class="dropzone"></div>

頁面上顯示兩個上述的div，可以使用class =“box”，id =“dropzone”拖曳的物件是放置接受區域的div。對於可拖曳對象，可以將draggable =“true”設定為可拖曳對象。 

  function load() {
        var box = document.querySelector(&#39;.box&#39;);
      box.addEventListener(&#39;dragstart&#39;, onDragStart, false);
      var zone = document.querySelector(&#39;.dropzone&#39;);
      zone.addEventListener(&#39;dragover&#39;, onDragOver, false);
      zone.addEventListener(&#39;drop&#39;, onDrop, false);
   }
    function onDragStart(e) {
      e.dataTransfer.setData(&#39;text&#39;, this.id);
    }
    function onDragOver(e) {
      e.preventDefault();
      this.textContent = &#39;onDragOver&#39;;
    }
    function onDrop(e) {
      e.preventDefault();
      this.textContent = &#39;onDrop&#39;;
    }

上面的程式碼為每個元素分配拖放事件。

對於要拖曳的元素，我們設定「dragstart」事件。啟動拖曳時，將執行onDragStart函數。

對於要刪除的元素，設定「dragover」「drop」事件。當拖曳的元素進入拖曳區域，onDragOver功能被執行，當元件被丟棄onDrop功能將被執行。

在dragstart的情況下，你必須寫程式碼來設定dataTransfer物件的值。它不使用插入dataTransfer中的值，但是如果沒有這個程式碼的話，在沒有資料的情況下也會實作。

運行結果

使用網頁瀏覽器顯示上述HTML檔案。將顯示如下所示的效果。

如何使用HTML5實作拖放單一元素

拖曳頂部的方框。如果將其拖曳到底部框架，框架中將顯示「onDragOver」。

如何使用HTML5實作拖放單一元素

將其放在框架中時，框架中會顯示「onDrop」字元。

如何使用HTML5實作拖放單一元素

範例2：新增了事件的拖放元素的方法

程式碼如下

##SimpleDragDrop2.html 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="SimpleDragDrop2.css" />
  <script>
    function load() {      
      var box = document.querySelector(&#39;.box&#39;);
      box.addEventListener(&#39;dragstart&#39;, onDragStart, false);
      box.addEventListener(&#39;dragend&#39;, onDragEnd, false);      
      var box = document.querySelector(&#39;.dropzone&#39;);
      box.addEventListener(&#39;dragenter&#39;, onDragEnter, false);
      box.addEventListener(&#39;dragover&#39;, onDragOver, false);
      box.addEventListener(&#39;dragleave&#39;, onDragLeave, false);
      box.addEventListener(&#39;drop&#39;, onDrop, false);
    }    
function onDragStart(e) {
      e.dataTransfer.setData(&#39;Text&#39;, this.id);      
      this.textContent = &#39;onDragStart&#39;;
    }    
function onDragEnd(e) {
      this.textContent = &#39;onDragEnd&#39;;
    }    
function onDragEnter(e) {
      this.textContent = &#39;onDragEnter&#39;;
    }    
function onDragOver(e) {
      e.preventDefault();      
      this.textContent = &#39;onDragOver&#39;;
    }    
function onDragLeave(e) {
            this.textContent = &#39;onDragLeave&#39;;
    }    
function onDrop(e) {
      e.preventDefault();      
      this.textContent = &#39;onDrop&#39;;
    }  
</script>
</head>
<body onload="load();">
  <div id="box" class="box" draggable="true"></div>
  <div id="dropzone" class="dropzone"></div>
</body>
</html>

SimpleDragDrop.css

.box {
  width:32px;  
  height:32px;  
  border:solid 1px #d01313;
}
.dropzone {
  margin-top:16px;  
  margin-bottom:16px;  
  width: 280px;  
  height: 64px;  
  border: solid 1px #808080;
}

說明：

 <div class="box" draggable="true"></div>
  <div id="dropzone" class="dropzone"></div>

如上例所示，頁面上顯示兩頁DIV。對於可拖曳對象，請將draggable =“true”設為可拖曳對象。 


function load() {
      var box = document.querySelector(&#39;.box&#39;);
      box.addEventListener(&#39;dragstart&#39;, onDragStart, false);
      box.addEventListener(&#39;dragend&#39;, onDragEnd, false);
      var box = document.querySelector(&#39;.dropzone&#39;);
      box.addEventListener(&#39;dragenter&#39;, onDragEnter, false);
      box.addEventListener(&#39;dragover&#39;, onDragOver, false);
      box.addEventListener(&#39;dragleave&#39;, onDragLeave, false);
      box.addEventListener(&#39;drop&#39;, onDrop, false);
    }
function onDragStart(e) {
      e.dataTransfer.setData(&#39;Text&#39;, this.id);      
      this.textContent = &#39;onDragStart&#39;;
    }
function onDragEnd(e) {      
            this.textContent = &#39;onDragEnd&#39;;
    }
function onDragEnter(e) {
      this.textContent = &#39;onDragEnter&#39;;
    }
function onDragOver(e) {
      e.preventDefault();
      this.textContent = &#39;onDragOver&#39;;
    }
function onDragLeave(e) {
      this.textContent = &#39;onDragLeave&#39;;
    }
function onDrop(e) {
      e.preventDefault();
      this.textContent = &#39;onDrop&#39;;
    }

上面的程式碼為每個元素分配拖放事件。

“dragstart”和“dragend”事件被指派給拖曳側的元素。一旦開始拖曳，呼叫ondstart函數，拖曳結束後，將被呼叫ondos agEs函數。

“dragenter”，“dragover”，“dragleave”和“drop”事件被指派給要拖曳的元素。當拖曳的元素進入拖曳區域，執行onDragEnter函數的功能，在拖曳區域內拖曳的狀態下執行onDragOver函數，從拖曳的區域出來的話，將執行OnDragLeave函數。當下拉拖曳的元素時，將執行onDrop函數。

運行結果


使用網頁瀏覽器顯示上述HTML檔案。將顯示如下所示的效果。

如何使用HTML5實作拖放單一元素

拖曳紅色區域的方形區域。字元“onDragStart”顯示在該區域中。

如何使用HTML5實作拖放單一元素

當你放開拖曳時，你會看到「onDragEnd」的角色紅框中的區域。

如何使用HTML5實作拖放單一元素

再次拖曳紅框區域。當拖曳到底部區域時，在放置區域中顯示字元“onDragOver”。

如何使用HTML5實作拖放單一元素

當你放開拖曳到拖曳區域紅框的區域，你會看到「onDrop」的字元在底部區域。

如何使用HTML5實作拖放單一元素

再次拖曳紅色框以與放置區域重疊。將顯示“onDragOver”字元。

如何使用HTML5實作拖放單一元素

拖曳紅色框並將其拖曳到拖曳到拖曳區域之外。放置區域中的字元顯示變為“onDragLeave”。

如何使用HTML5實作拖放單一元素

以上是如何使用HTML5實作拖放單一元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：什麼是前端和後端下一篇：什麼是前端和後端

相關文章

看更多