拖放事件

HTML5为所有的HTML元素新增了一个draggable属性，表示元素是否允许拖动。默认情况下，图像、链接和文本是可以拖动的，文本只有在被选中的情况下才能拖动。 需要注意的是在ff下只加**draggable="true"**还不能实现拖放，需要做一些处理，大多数浏览器会为正被拖动的元素创建一个半透明的副本，这个副本始终跟着光标移动。

元素拖放时会触发一系列的拖放事件

  1. （1）拖放元素事件：事件对象为被拖放的元素
  3.     ondragstart  拖放开始触发
  4.     ondragend    拖放结束触发
  5.       ondrag       拖放期间触发，连续触发(无论拖放元素放在有效目标还是无效目标，都会触发)
  7. （2）目标元素事件：事件对象为目标元素
  9.      ondragenter  拖放元素进入目标元素触发
  10.      ondragleave  拖放元素离开目标元素触发
  11.      ondragover   拖放元素进入目标元素和离开目标元素之间触发，连续触发
  12.      ondrop       在目标元素上释放鼠标时触发，要想触发drop事件就必须在dragover当中阻止默认事件
  14. （3）事件执行顺序：
  16.   drop不触发的时候
  17.   dragstart > drag > dragenter > dragover > dragleave > dragend
  19.     drop触发的时候 在dragover中阻止默认事件
  20.     dragstart > drag > dragenter > dragover > drop > dragend

示例代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>拖放事件</title>
  7.     <style type="text/css">
  8.         ul li {
  9.             width: 100px;
  10.             height: 40px;
  11.             background: #ff0;
  12.             margin-bottom: 8px;
  13.             list-style: none;
  14.         }
  16.         div {
  17.             width: 200px;
  18.             height: 200px;
  19.             background: #f00;
  20.             margin: 100px 0 0 100px;
  21.         }
  22.     </style>
  23. </head>
  24. <script>
  25.     window.onload = function () {
  26.         var oUl = document.getElementById('ul1');
  27.         var oDiv = document.getElementById('div1');
  28.         var oLi = oUl.getElementsByTagName('li')[0];
  29.         var i = 0;
  31.         // 拖放元素事件
  32.         oLi.ondragstart = function () {
  33.             this.style.background = 'blue';
  34.         }
  36.         oLi.ondragend = function () {
  37.             this.style.background = 'yellow';
  38.         }
  40.         oLi.ondrag=function (){
  41.             //连续触发
  42.             document.title=i++;
  43.         }
  45.         // 目标元素事件,通过重写dragenter和dragleave方法来自定义目标元素背景颜色
  46.         oDiv.ondragenter=function (){
  47.             this.style.background='green';
  48.         }
  50.         oDiv.ondragleave=function (){
  51.             this.style.background='red';
  52.         }
  54.         // 要想触发drop事件就必须在dragover当中阻止默认事件
  55.         oDiv.ondragover = function () {
  56.             console.log(i);
  57.             return false;
  58.         }
  60.         // 在目标元素上释放鼠标时触发
  61.         oDiv.ondrop = function () {
  62.             this.style.background = '#000';
  63.         }
  64.     };
  65. </script>
  67. <body>
  68.     <ul id="ul1">
  69.         <li draggable="true">拖放元素</li>
  70.     </ul>
  72.     <div id="div1">目标元素</div>
  73. </body>
  74. </html>

解决ff下不能拖放的问题

要解决ff下不能拖放的问题，必须在ondragstart事件中设置dataTransfer对象的setData方法，dataTransfer对象是event对象下的一个属性，需要通过event对象访问 ，下文会详细说明dataTransfer对象。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>ff下不能拖放的问题</title>
  6.     <style type="text/css">
  7.         ul li{width: 100px;height: 40px;background: #ff0;margin-bottom:8px;list-style: none; }
  8.         div{width: 100px;height: 100px;background: #f00;margin:300px 0 0 300px;}
  9.     </style>
  10. </head>
  11. <script>
  13. window.onload=function (){
  14.     var oUl=document.getElementById('ul1');
  15.     var oDiv=document.getElementById('div1');
  16.     var aLi=oUl.getElementsByTagName('li');
  18.     // 拖放元素事件
  19.     for (var i = 0; i < aLi.length; i++) {
  20.         aLi[i].ondragstart=function (ev){
  21.             ev.dataTransfer.setData('name','gongyz');
  22.         }
  23.     }
  25.     // 目标元素事件
  26.     oDiv.ondragover=function (){
  27.         return false; // 要想触发ondrop事件，必须在onondragover中阻止默认事件
  28.     }
  30.     oDiv.ondrop=function (ev){
  31.         console.log(ev.dataTransfer.getData('name'))
  32.     }
  33. }
  34. </script>
  35. <body>
  36.     <ul id="ul1">
  37.         <li draggable="true">a</li>
  38.         <li draggable="true">b</li>
  39.         <li draggable="true">c</li>
  40.     </ul>
  42.     <div id="div1"></div>
  43. </body>
  44. </html>

DataTransfer 对象

概述

DataTransfer 对象用来保存，通过拖放动作，拖动到浏览器的数据。它可以保存一项或多项数据、一种或者多种数据类型。

这个对象在所有的拖放事件属性dataTransfer中都是可用的，但是不能单独创建，也就是说，在进行拖放操作的时候，会自动创建一个dataTransfer对象，这个对象作为拖放事件的事件对象的一个属性，保存了当前拖放操作的数据。

方法

setData(key,value) ：设置拖放时要传递的数据（拖放元素）

getData(key)：获取拖放时传递的数据（目标元素）

setDragImage(DOMElement image,x,y) ：使用自定义的图片作为拖放时副本 (该方法接收三个参数 指定的元素，坐标X，坐标Y)

属性

files：用来获取外部拖放进来的文件，返回一个类数组的FileList对象

拖放删除元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>拖放删除元素</title>
  6.     <style type="text/css">
  7.         ul li{width: 100px;height: 30px;margin:8px;background: #ff0;}
  8.         div{width: 200px;height: 200px;margin:100px 0 0 100px;background: #f00;}
  9.     </style>
  10. </head>
  11. <script>
  12. window.onload=function (){
  13.     var oUl=document.getElementsByTagName('ul')[0];
  14.     var oDiv=document.getElementsByTagName('div')[0];
  15.     var aLi=oUl.getElementsByTagName('li');
  17.     for (var i = 0; i < aLi.length; i++) {
  18.         aLi[i].index=i;
  19.         aLi[i].ondragstart=function (ev){
  20.             ev.dataTransfer.setData('data',this.index);
  21.         }
  22.     }
  24.     oDiv.ondragover=function (){
  25.         return false;//要想触发ondrop事件，必须在onondragover中阻止默认事件
  26.     }
  28.     oDiv.ondrop=function (ev){
  29.       // 拿到索引值后删除对应的元素
  30.         var _index=ev.dataTransfer.getData('data');
  31.         oUl.removeChild(aLi[_index]);
  32.         for (var i = 0; i < aLi.length; i++) {
  33.             aLi[i].index = i;
  34.         }
  35.     }
  36. }
  38. </script>
  39. <body>
  40.     <ul>
  41.         <li draggable="true">a</li>
  42.         <li draggable="true">b</li>
  43.         <li draggable="true">c</li>
  44.         <li draggable="true">d</li>
  45.     </ul>
  46.     <div></div>
  47. </body>
  48. </html>

自定义拖放副本

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>dataTransfer对象详解</title>
  6.     <style type="text/css">
  7.         ul li{width: 100px;height: 40px;background: #ff0;margin-bottom:8px;list-style: none; }
  8.         div{width: 100px;height: 100px;background: #f00;margin:300px 0 0 300px;}
  9.     </style>
  10. </head>
  11. <script>
  12. window.onload=function (){
  13.     /*
  14.         setDragImage方法  使用自定义的图片作为拖放时副本
  15.         该方法接收三个参数  指定的元素，坐标X，坐标Y
  16.     */
  17.     var oUl=document.getElementById('ul1');
  18.     var oDiv=document.getElementById('div1');
  19.     var aLi=oUl.getElementsByTagName('li');
  20.     var oImg=document.getElementsByTagName('img')[0];
  22.     // 拖放元素事件
  23.     for (var i = 0; i < aLi.length; i++) {
  24.         aLi[i].index=i;
  25.         aLi[i].ondragstart=function (ev){
  26.             var ev=ev||event;
  27.             this.style.background='blue';
  28.             ev.dataTransfer.setData('name','leo');
  29.             ev.dataTransfer.setDragImage(oImg,0,0)    
  30.         }
  31.     }
  33.     //目标元素
  34.     oDiv.ondragover=function (){
  35.         return false; // 要想触发drop事件就必须在dragover当中阻止默认事件
  36.     }
  38.     oDiv.ondrop=function (){
  39.         console.log(123)
  40.     }
  41. };
  42. </script>
  43. <body>
  44.     <ul id="ul1">
  45.         <li draggable="true">a</li>
  46.         <li draggable="true">b</li>
  47.         <li draggable="true">c</li>
  48.     </ul>
  50.     <div id="div1"></div>
  52.     <img src="xxx.png">
  53. </body>
  54. </html>

File和FileReader对象

File是一个是特殊类型的Blob对象，保存了和文件有关的信息。File 对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以是来自由拖放操作生成的DataTransfer对象中的files属性，这个属性就是一个类数组的FileList对象。

FileReader 用来读取通过dataTransfer对象的files属性获取的外部文件 ，将文件读取为Data URL格式,读取的结果保存在result属性中，如果是图片，返回base64格式的图片数据 。

结合之前的拖放操作和DataTransfer对象，我们就可以实现拖放上传文件功能，下面的代码示例介绍了FileReader接口的使用方法：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>图片预览功能</title>
  6.     <style type="text/css">
  7.         div{width: 300px;height: 300px;background: #f00;margin:100px 0 0 200px;}
  8.     </style>
  9. </head>
  10. <script>
  12. window.onload=function (){
  13.     /*
  14.         fileReader对象  用来读取通过dataTransfer对象的files属性获取的文件
  16.         var fd = new FileReader();
  18.         readAsDataURL()方法   参数为要读取的文件对象，将文件读取为DataURL格式
  20.         onload事件              当读取文件完成的时候触发此事件
  22.         fd.result            取读取的文件数据，如果是图片，返回base64格式的图片数据
  23.     */
  24.     var oDiv=document.getElementById('div1');
  26.     var oUl=document.getElementsByTagName('ul')[0];
  28.     //目标元素
  29.     oDiv.ondragover=function (){
  30.         return false;// 要想触发drop事件就必须在dragover当中阻止默认事件
  31.     }
  33.     oDiv.ondrop=function (ev){
  34.         var ev=ev||event;
  35.         var fs=ev.dataTransfer.files;
  36.         for (var i = 0; i < fs.length; i++) {
  37.             if (fs[i].type.indexOf('image') !== -1) {
  38.                 var fd=new FileReader();
  39.                 fd.readAsDataURL(fs[i]);
  40.                 fd.onload=function (){
  41.                     var oLi=document.createElement('li');
  42.                     oLi.innerHTML='<img src="'+this.result+'">';
  43.                     oUl.appendChild(oLi);        
  44.                 }
  45.             }else{
  46.                 alert('请上传图片类型！！！');
  47.             }                
  48.         }
  49.         return false;
  50.     }
  51. };
  52. </script>
  53. <body>
  54.     <div id="div1">请把文件拖放在此处</div>
  55.     <ul></ul>
  56. </body>
  57. </html>