html5篇——拖放(Drag和Drop)

好久没有更新html5了，继续更新html5，今天更新html5的拖放功能。

拖放，就是抓取一个对象后拖放到另一个位置。很常用的一个功能，在还没有html5的时候，我们实现这个功能，通常会用大量的js代码，再利用mousemove,mouseup等鼠标事件来实现，总的来说比较麻烦。在html5中，引入了可以直接进行拖放的api，大大简化了我们的操作。

浏览器支持

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

注释：在 Safari 5.1.2 中不支持拖放。

如何实现

接下来用个实例来总结一下拖放的几个步骤：

第一步：设置元素为可拖放

利用draggable="true"设置元素为可拖放。

比如这样：

<img src="" draggable="true">

或这样

<div draggable="true">haha</div>

第二步:拖动开始和设置拖动数据-ondragstart和setData

在一个元素中，ondragstart属性会调用一个函数，这个函数定义了被拖动的数据，dataTransfer.setData()方法设置了

被拖数据的数据类型和值，数据类型可自己设置（即下面代码中的“Text”）。值即被拖数据的id，所以拖动元素和被放置

元素均需设置id。

如下：

<div id="div2" draggable="true" ondragstart="drag(event)" style="border:1px red solid;width: 200px;height:100px;">hahahhahhahahahaha</div>

function drag(ev){      ev.dataTransfer.setData("Text",ev.target.id);}

第三步：放在何处-ondragover

ondragover规定被拖动的数据放置在何处。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式，在这里，调用 preventDefault() 来避免浏览器对

数据的默认处理。

<div id="div1" ondragover="allowDrop(event)" style="border:1px green solid;width: 300px;height:250px;"></div>

 function allowDrop(ev){        ev.preventDefault();}

第四步：进行放置-ondrop

当放置被拖数据时，会发生ondrop 事件。ondrop会调用一个函数。

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="border:1px green solid;width: 300px;height:250px;"></div>

function drop(ev){        ev.preventDefault();        var data=ev.dataTransfer.getData("dd");        ev.target.appendChild(document.getElementById(data));}

上面代码中getData()方法里的数据类型必须与setData()里定义的数据类型一致。

全部代码如下：

<!DOCTYPE html> 
 <html> 
  <head> 
  <meta charset="utf-8"/>
    <title></title> 
  </head> 
  <body> 
      <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="border:1px green solid;width: 300px;height:250px;"></div>
      <img id="div3" src="QQ图片20150925120406.jpg" draggable="true" ondragstart="drag(event)" style="border:1px red solid;width: 200px;height:100px;">
      <div id="div2" draggable="true" ondragstart="drag(event)" style="border:1px red solid;width: 200px;height:100px;">hahahhahhahahahaha</div>
   </body> 
   <script>
     function allowDrop(ev){
        ev.preventDefault();
     }
     function drag(ev){
      ev.dataTransfer.setData("dd",ev.target.id);
     }
     function drop(ev){
        ev.preventDefault();
        var data=ev.dataTransfer.getData("dd");
        ev.target.appendChild(document.getElementById(data));
     }
   </script>
</html>

今天纯属打酱油，因为这篇跟各网站的没啥区别，为什么要写，强迫症患者日常，不能掉一章！

秒客网

html5篇——拖放(Drag和Drop)

相关文章