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

代码如下

SimpleDragDrop.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”，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中的值，但是如果没有这个代码的话，在没有数据的情况下也会实现。

运行结果

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

示例2：添加了事件的拖放元素的方法

代码如下

SimpleDragDrop2.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。对于可拖动对象，请将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函数。

运行结果

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

以上就是如何使用HTML5实现拖放单个元素的详细内容，更多请关注 第一PHP社区 其它相关文章！