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"设置元素为可拖放。

比如这样：

或这样

haha

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

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

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

元素均需设置id。

如下：

hahahhahhahahahaha

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

第三步：放在何处-ondragover

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

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

数据的默认处理。

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

第四步：进行放置-ondrop

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

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

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

全部代码如下：

 
  
   
  
     
   
   
      

      
      
hahahhahhahahahaha
    
   

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