masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Tutorial H5 > 如何使用HTML5实现拖放单个元素

如何使用HTML5实现拖放单个元素

不言
Lepaskan： 2018-12-01 14:07:56
asal
3684 orang telah melayarinya

如何使用HTML5实现拖放单个元素？本篇文章将给大家介绍关于实现拖放HTML元素的JavaScript代码，下面一起来看具体的实现内容。

JavaScript

通过使用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>
Salin selepas log masuk

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;
}
Salin selepas log masuk

说明：

<div class="box" draggable="true"></div>
  <div id="dropzone" class="dropzone"></div>
Salin selepas log masuk

页面上显示两个上述的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;;
    }
Salin selepas log masuk

上面的代码为每个元素分配拖放事件。

对于要拖动的元素，我们设置“dragstart”事件。启动拖动时，将执行onDragStart函数。

对于要删除的元素，设置“dragover”“drop”事件。当拖动的元素进入拖放区域，onDragOver功能被执行，当元件被丢弃onDrop功能将被执行。

在dragstart的情况下，你必须编写代码来设置dataTransfer对象的值。它不使用插入dataTransfer中的值，但是如果没有这个代码的话，在没有数据的情况下也会实现。

运行结果

使用Web浏览器显示上述HTML文件。将显示如下所示的效果。

JavaScript

拖动顶部的方框。如果将其拖动到底部框架，框架中将显示“onDragOver”。

JavaScript

将其放在框架中时，框架中会显示“onDrop”字符。

2345截图20181201114936.png

示例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>
Salin selepas log masuk

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;
}
Salin selepas log masuk

说明：

 <div class="box" draggable="true"></div>
  <div id="dropzone" class="dropzone"></div>
Salin selepas log masuk

如上例所示，页面上显示两页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;;
    }
Salin selepas log masuk

上面的代码为每个元素分配拖放事件。
“dragstart”和“dragend”事件被分配给拖动侧的元素。一旦开始拖动，调用ondstart函数，拖动结束后，将被调用ondos agEs函数。

“dragenter”，“dragover”，“dragleave”和“drop”事件被分配给要拖动的元素。当拖动的元素进入拖放区域，执行onDragEnter函数的功能，在拖拽区域内拖动的状态下执行onDragOver函数，从拖拽的区域出来的话，将执行OnDragLeave函数。下拉拖动的元素时，将执行onDrop函数。

运行结果

使用Web浏览器显示上述HTML文件。将显示如下所示的效果。

2345截图20181201115451.png

拖动红色区域的方形区域。字符“onDragStart”显示在该区域中。

微信截图_20181201134814.png

当你松开拖动时，你会看到“onDragEnd”的角色红框中的区域。

微信截图_20181201135054.png

再次拖动红框区域。当拖放到底部区域时，在放置区域中显示字符“onDragOver”。

微信截图_20181201135240.png

当你放开拖到拖放区域红框的区域，你会看到“onDrop”的字符在底部区域中。

微信截图_20181201135454.png

再次拖动红框以与放置区域重叠。将显示“onDragOver”字符。

微信截图_20181201140001.png

拖动红框并将其拖动到拖放区域之外。放置区域中的字符显示变为“onDragLeave”。

微信截图_20181201140056.png

Atas ialah kandungan terperinci 如何使用HTML5实现拖放单个元素. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
seret dan lepas
sumber：php.cn
Artikel sebelumnya：什么是前端和后端 Artikel seterusnya：如何使用HTML5实现多个元素的拖放功能
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Di mana saya harus meletakkan arahan CustomLog dalam apache Saya menggunakan php:7.2-apachedocker. Saya perlu melumpuhkan log akses log masuk url sema...
daripada 2024-04-06 22:03:59
0
1
990
Titik Scatterplot tidak mengekalkan nilai semasa mengezum masuk d3.js Ini adalah kali pertama saya menggunakan d3.js, jadi harap bersabar. Saya melaksanakannya ...
daripada 2024-04-06 18:16:26
0
1
403
React Three Fiber: Mengapa acara skrol saya ketinggalan? Dalam ReactThreeFiber, saya mempunyai komponen React yang menghasilkan sprite yang saya ma...
daripada 2024-04-06 13:39:24
0
1
410
V-kad Vuetify sesuai dengan semua ketinggian yang mungkin dalam v-col Saya sedang membina halaman log masuk/pendaftaran menggunakan vue dan vuetify. Saya meleta...
daripada 2024-04-06 10:29:26
0
1
406
Eksport pembolehubah useState ke komponen/halaman lain Saya agak buntu. Saya telah meletakkan hasil input pengguna ke dalam tatasusunan yang bole...
daripada 2024-04-05 11:30:54
0
1
286
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan