在提出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 <html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
6 Remove this if you use the .htaccess -->
7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
8 <title>dragAPI</title>
9 <meta name="description" content="" />
10 <meta name="viewport" content="width=device-width; initial-scale=1.0" />
11 <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
12 <link rel="shortcut icon" href="/favicon.ico" />
13 <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
14 <script >
15 function init(){
16 var dragme = document.getElementById('dragee');
17 var dragRec = document.getElementById('drager');
18 var i = 0;;
19
20 dragme.addEventListener('dragstart',function(e){
21 var dt = e.dataTransfer;//datatransfer 表示拖放时要携带的数据
22 dt.effectAllowed = 'all';
23 //effectAllowed: copy, link, move, copyLink, copyMove, all, none & uninitialized
24 //effectAllowed表示携带数据能允许 拖放的操作类型。
25 i++;
26 dt.setData('text/plain',"你好,我被拖放了"+ i+"次<br/>");
27 },false);
28 dragRec.addEventListener('dragend',function(e){
29 e.preventDefault();
30 },false);
31
32 dragRec.addEventListener('drop',function(e){
33 var dt = e.dataTransfer;
34 var text = 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.ondragover = function(e){e.preventDefault();};
44 document.ondrop = function(e){e.preventDefault();};
45 </script>
46 </head>
47 <body onload="init()">
48 <div id='dragee' draggable="true" style=" 200px;height:30px;border: 1px solid blue ">请托我</div>
49 <div id='drager' style=" 200px;height: 500px;border: 1px solid red">拖到我身上</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的公共方法，所以我们还可以针对这个原理做点其他的事情...