说一下html5 drag api,HTML5 DragAPI

在提出dragAPI之前，我们可以通过鼠标事件以及事件目标来实现拖动或与拖动相关的数据处理。

一、实现拖放

首先将要拖放的元素的draggable属性设为true(draggable = 'true')，另外，img 和 a 元素(必须指定 href)的draggable属性默认就是true。

其次关于拖放存在以下几个事件

事件

产生事件的元素

描述

dragstart

被拖放的元素

开始拖放操作

drag

被拖放的元素

拖放过程中

dragenter

拖放过程中鼠标经过的元素

被拖放的元素开始进入本元素的范围内

dragover

拖放过程中鼠标经过的元素

被拖放的元素正在本元素范围内移动

dragleave

拖放构成中鼠标经过的元素

拖放的元素离开本元素的范围

drop

拖放的目标元素

有其他元素被拖放到本元素中

dragend

拖放的对象元素

拖放操作结束

我们现在举个例子，实现的需求是，界面上有两个div(dragee，dragrec)，如果我们把dragee拖放到dragrec中记录被拖放的次数。

实现过程如下，(PS：请在chrome中执行，因为ff不支持preventDefault方法等，课更改returnvalue来兼容ff)

1 DOCTYPE html>

2

3

4

5

7

8

dragAPItitle>

9

10

11

12

13

14 15 functioninit(){16 　　　　　　　　vardragme=document.getElementById('dragee');17 　　　　　　　　vardragRec=document.getElementById('drager');18 　　　　　　　　vari= 0;;19 20 dragme.addEventListener('dragstart',function(e){21 　　　　　　　　　　vardt=e.dataTransfer;//datatransfer 表示拖放时要携带的数据22 dt.effectAllowed= 'all';23 　　　　　　　　　　//effectAllowed: copy, link, move, copyLink, copyMove, all, none & uninitialized24 　　　　　　　　　　//effectAllowed表示携带数据能允许 拖放的操作类型。25 i++;26 dt.setData('text/plain',"你好,我被拖放了"+i+"次");27 },false);28 dragRec.addEventListener('dragend',function(e){29 e.preventDefault();30 },false);31 32 dragRec.addEventListener('drop',function(e){33 vardt=e.dataTransfer;34 　　　　　　　　　　　　vartext=dt.getData('text/plain');35 　　　　　　　　　　　　if(i==1){36 dragRec.innerHTML= "";37 }38 dragRec.innerHTML+=text;39 e.preventDefault();40 e.stopPropagation();41 },false);42 }43 document.οndragοver= function(e){e.preventDefault();};44 document.οndrοp= function(e){e.preventDefault();};45 　　　　　　script>

46 head>

47

48 请托我div>

49 拖到我身上div>

50 body>

51 html>

值得注意的几件事：

首先：针对要拖放的目标元素，必须在dragend或者dragover事件中调用"e.preventDefault()"，因为在默认情况下，拖放的目标元素是不允许接受元素的，为了把元素拖放到其中，必须把默认方法关掉，还有就是setData和getData方法的参数需要注意一下。

目前拖放API所支持的MIME类型包括：

text/plain 文本文字

text/html HTML文字

text/xml XML文字

text/uri-list URL列表，每个URL为一行。

其次：让我们来跟调一下，特别关注一下dataTransfer属性，请看下图，

我们可以看见dataTransfer对象的原型链中，_proto_指向的是Clipboard,constructor指向的是 function Clipboard(){}函数，我们可以认为dataTransfer继承了clipboard，因此也会拥有clipboard的公共方法，所以我们还可以针对这个原理做点其他的事情...