怎样运用HTML5完成拖放单个元素【html5教程】

怎样运用HTML5完成拖放单个元素？本篇文章将给人人引见关于完成拖放HTML元素的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('.box');
      box.addEventListener('dragstart', onDragStart, false);      
      var zone = document.querySelector('.dropzone');
      zone.addEventListener('dragover', onDragOver, false);
      zone.addEventListener('drop', onDrop, false);
   }    
function onDragStart(e) {
      e.dataTransfer.setData('text', this.id);
    }    
function onDragOver(e) {
      e.preventDefault();      
this.textContent = 'onDragOver';
    }    
function onDrop(e) {
      e.preventDefault();      
this.textContent = 'onDrop';
    }  
</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('.box');
      box.addEventListener('dragstart', onDragStart, false);
      var zone = document.querySelector('.dropzone');
      zone.addEventListener('dragover', onDragOver, false);
      zone.addEventListener('drop', onDrop, false);
   }
    function onDragStart(e) {
      e.dataTransfer.setData('text', this.id);
    }
    function onDragOver(e) {
      e.preventDefault();
      this.textContent = 'onDragOver';
    }
    function onDrop(e) {
      e.preventDefault();
      this.textContent = 'onDrop';
    }

上面的代码为每一个元素分派拖放事宜。

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

关于要删除的元素，设置“dragover”“drop”事宜。当拖动的元素进入拖放地区，onDragOver功用被实行，当元件被抛弃onDrop功用将被实行。

在dragstart的情况下，你必需编写代码来设置dataTransfer对象的值。它不运用插进去dataTransfer中的值，然则假如没有这个代码的话，在没有数据的情况下也会完成。

运转结果

运用Web浏览器显现上述HTML文件。将显现以下所示的结果。

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

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

示例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('.box');
      box.addEventListener('dragstart', onDragStart, false);
      box.addEventListener('dragend', onDragEnd, false);      
      var box = document.querySelector('.dropzone');
      box.addEventListener('dragenter', onDragEnter, false);
      box.addEventListener('dragover', onDragOver, false);
      box.addEventListener('dragleave', onDragLeave, false);
      box.addEventListener('drop', onDrop, false);
    }    
function onDragStart(e) {
      e.dataTransfer.setData('Text', this.id);      
      this.textContent = 'onDragStart';
    }    
function onDragEnd(e) {
      this.textContent = 'onDragEnd';
    }    
function onDragEnter(e) {
      this.textContent = 'onDragEnter';
    }    
function onDragOver(e) {
      e.preventDefault();      
      this.textContent = 'onDragOver';
    }    
function onDragLeave(e) {
            this.textContent = 'onDragLeave';
    }    
function onDrop(e) {
      e.preventDefault();      
      this.textContent = 'onDrop';
    }  
</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('.box');
      box.addEventListener('dragstart', onDragStart, false);
      box.addEventListener('dragend', onDragEnd, false);
      var box = document.querySelector('.dropzone');
      box.addEventListener('dragenter', onDragEnter, false);
      box.addEventListener('dragover', onDragOver, false);
      box.addEventListener('dragleave', onDragLeave, false);
      box.addEventListener('drop', onDrop, false);
    }
function onDragStart(e) {
      e.dataTransfer.setData('Text', this.id);      
      this.textContent = 'onDragStart';
    }
function onDragEnd(e) {      
            this.textContent = 'onDragEnd';
    }
function onDragEnter(e) {
      this.textContent = 'onDragEnter';
    }
function onDragOver(e) {
      e.preventDefault();
      this.textContent = 'onDragOver';
    }
function onDragLeave(e) {
      this.textContent = 'onDragLeave';
    }
function onDrop(e) {
      e.preventDefault();
      this.textContent = 'onDrop';
    }

上面的代码为每一个元素分派拖放事宜。
“dragstart”和“dragend”事宜被分派给拖动侧的元素。一旦最先拖动，挪用ondstart函数，拖动完毕后，将被挪用ondos agEs函数。

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

运转结果

运用Web浏览器显现上述HTML文件。将显现以下所示的结果。