一、什么是拖拽和释放？

拖拽：Drag

释放：Drop

拖拽指的是鼠标点击源对象后一直移动对象不松手，一但松手即释放了

二、什么是源对象和目标对象？

源对象：指的是我们鼠标点击的一个事物，这里可以是一张图片，一个DIV，一段文本等等。

目标对象：指的是我们拖动源对象后移动到一块区域，源对象可以进入这个区域，可以在这个区域上方悬停(未松手)，可以释松手释放将源对象放置此处(已松手)，也可以悬停后离开该区域。

三、拖拽API的相关函数

被拖动的源对象可以触发的事件：

(1)ondragstart：源对象开始被拖动

(2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)

(3)ondragend：源对象被拖动结束

拖动源对象可以进入到上方的目标对象可以触发的事件：

(1)ondragenter：目标对象被源对象拖动着进入

(2)ondragover：目标对象被源对象拖动着悬停在上方

(3)ondragleave：源对象拖动着离开了目标对象

(4)ondrop：源对象拖动着在目标对象上方释放/松手

拖拽API总共就是7个函数！！

四、如何在拖动的源对象事件和目标对象事件间传递数据
  

HTML5为所有的拖动相关事件提供了一个新的属性：

e.dataTransfer { }          //数据传递对象

功能：用于在源对象和目标对象的事件间传递数据

  源对象上的事件处理中保存数据：

e.dataTransfer.setData( k,  v );     //k-v必须都是string类型

  目标对象上的事件处理中读取数据：

var v = e.dataTransfer.getData( k );

 

示例一：实现一个可以随着鼠标拖动而移动的div

提示：div需要绝对定位，ondrag事件中获取鼠标的坐标值

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin:0;
            position: relative;
        }
        div{
            position:absolute;
            width: 100px;
            height: 100px;
            background-color: #000;
        }
    </style>
</head>
<body>
<h3>随着鼠标拖动而移动的小飞机</h3>
<div id="p3"></div>
<script>
    p3.ondragstart=function(e){
        console.log('事件源p3开始拖动');
        //记录刚一拖动时，鼠标在飞机上的偏移量
        offsetX= e.offsetX;
        offsetY= e.offsetY;
    }
    p3.ondrag=function(e){
        console.log('事件源p3拖动中');
        var x= e.pageX;
        var y= e.pageY;
        console.log(x+'-'+y);
        //drag事件最后一刻，无法读取鼠标的坐标，pageX和pageY都变为0
        if(x==0 && y==0){
            return; //不处理拖动最后一刻X和Y都为0的情形
        }
        x-=offsetX;
        y-=offsetY;
 
        p3.style.left=x+'px';
        p3.style.top=y+'px';
    }
    p3.ondragend=function(){
        console.log('源对象p3拖动结束');
    }
</script>
</body>
</html>

五、拖拽API的补充知识点

HTML5新增的文件操作对象：

File： 代表一个文件对象

FileList： 代表一个文件列表对象，类数组

FileReader：用于从文件中读取数据

FileWriter：用于向文件中写出数据

相关函数：

div.ondrop = function(e){
    var f = e.dataTransfer.files[0];      //找到拖放的文件
    var fr = new FileReader();        //创建文件读取器
    fr.readAsURLData(f);         //读取文件内容
    fr.onload = function(){       //读取完成
    img.src = fr.result;        //使用读取到的数据
    }
}

示例二：实现将图片上传至网页

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    #container {
      border: 1px solid #aaa;
      border-radius: 3px;
      padding: 10px;
      margin: 10px;
      min-height: 400px;
    }
  </style>
</head>
<body>
 
  <h1>拖放API的扩展知识</h1>
  <h3>请拖动您的照片到下方方框区域</h3>
  <div id="container"></div>
 
  <script>
    //监听document的drop事件——取消其默认行为：在新窗口中打开图片
    document.ondragover = function(e){
      e.preventDefault(); //使得drop事件可以触发
    }
    document.ondrop = function(e){
      e.preventDefault(); //阻止在新窗口中打开图片，否则仍然会执行下载操作！！！
    }
 
    //监听div#container的drop事件，设法读取到释放的图片数据，显示出来
    container.ondragover = function(e){
      e.preventDefault();
    }
    container.ondrop = function(e){
      console.log('客户端拖动着一张图片释放了...')
      //当前的目标对象读取拖放源对象存储的数据
      //console.log(e.dataTransfer); //显示有问题
      //console.log(e.dataTransfer.files.length); //拖进来的图片的数量
      var f0 = e.dataTransfer.files[0];
      //console.log(f0); //文件对象 File
 
      //从文件对象中读取数据
      var fr = new FileReader();
      //fr.readAsText(f0); //从文件中读取文本字符串
      fr.readAsDataURL(f0); //从文件中读取URL数据
      fr.onload = function(){
        console.log('读取文件完成')
        console.log(fr.result);
        var img = new Image();
        img.src = fr.result; //URL数据
        container.appendChild(img);
      }
    }
 
  </script>
</body>
</html>