HTML5 拖拽实现

简介：

　　最早在网页中引入JavaScript拖放功能是IE4。当时，网页中只有两种对象可以拖放：图像和某些文本。拖放图像时，把鼠标放到图像上，按住鼠标不放就可以拖放它。拖放文本时，要先选中文本，然后可以像拖放图像一样拖放被选中的文本。在IE4中，唯一有效的放置目标是文本框。到了IE5，拖放功能得到拓展，添加了新的事件，而且几乎网页中的任何元素都可以作为放置目标。IE5.5更进一步让网页中的任何元素都可以拖放。HTML5以IE的实例为基础指定了拖放规范。

 一、基本释义
 　　1 实现拖拽效果
  　　　　* 要拖拽的文件是什么? - 源元素
  　　　　* 要拖拽到哪里去? - 目标元素
 　　2 目前实现拖拽效果
  　　　　* 使用原生DOM就能实现 - 最麻烦
  　　　　* 使用jQuery的插件 - 拖拽效果
  　　　　* HTML5中提供的拖拽功能
二、HTML5中实现拖拽
 　　1. 源元素事件
       　　* dragstart - 当鼠标开始拖放时被触发
       　　* drag - 当鼠标拖放过程中,类似于mousemove事件
       　　* dragend - 当鼠标结束拖放时被触发

     // 为源元素绑定源元素事件
     myimg.addEventListener("dragstart",MyDragStart);
     myimg.addEventListener("drag",MyDrag);
     myimg.addEventListener("dragend",MyDragEnd);

　　2. 目标元素事件
       　　* dragenter - 当鼠标拖放进入到目标元素内被触发
       　　* dragover - 当鼠标到达目前元素被触发
         　　　　* 为该事件增加event.preventDefault();
       　　* drop - 当鼠标实现拖放效果时被触发
         　　　　* 默认情况下,该事件没有被触发
  　　　　　　　　 * 原因 - HTML页面默认情况下,不允许拖放
    　　　　　　　　　* 称之为HTML页面的默认行为
   　　　　　　　　* 解决 - 阻止页面的默认行为
    　　　　　　　　　* 事件对象event.preventDefault()方法
       　　* dragleave - 当鼠标拖放离开目标元素被触发

     // 为目标元素绑定事件
     d2.addEventListener("dragenter",MyDragEnter);
     d2.addEventListener("dragover",MyDragOver);
     d2.addEventListener("drop",MyDrop);
     d2.addEventListener("dragleave",MyDragLeave);

　　3. dataTransfer对象
  　　　　* 作用 - 类似于window系统的剪切板的功能
  　　　　* 功能
   　　　　　　* 可以将源元素的信息(数据),存储在这里
   　　　　　　* 将存储在该对象的源元素信息,提供给目标元素
  　　　　* 方法
   　　　　　　* setData() - 设置(源元素)数据
   　　　　　　* 在源元素事件中使用
  　　　　* getData() - 获取设置的数据
   　　　　　　* 在目标元素事件中使用
  　　　　* clearData() - 清除(设置的)数据
   　　　　　　* 所有的数据内容,存储在浏览器内存中
   　　　　　　* 当使用完毕数据内容时,清除
  　　　　* setDragImage()方法
   　　　　　　* 作用 - 修改拖放过程中,鼠标跟随的图片效果
   　　　　　　* 用法 - drag、dragstart等事件
   　　　　　　* 注意 - 实际操作中,该方法几乎不用

　　4.可拖动

　　　　默认情况下，图像、链接和文本是可以拖动的，也就是说，不用额外编写代码，用户就可以拖动它们。文本只有在被选中的情况下才能拖动，而图像和链接在任何时候都可以拖动。

　　　 让其它元素可以拖动也是可能的。HTML5为所有HTML元素规定了一个draggable属性，表示元素是否可以拖动。图像和链接的draggable
属性自动被设置成了true，而其它元素这个属性的默认值都是false。要想让其它元素可拖动，或者让图像或链接不能拖动，都可以设置这个属性。例如：

 <!-- 让这个图像不可以拖动 -->
 <img src="smile.gif" draggable="false" alt+"Smiley face">
 <!-- 让这个元素可以拖动 -->
 <div draggable="true">...</div>

　　　　支持draggable属性的浏览器有IE10+、Firefox 4+、Safari 5+和Chrome。Opera
11.5以及之前的版本都不支持HTML5的拖放功能。另外，为了让Firefox
支持可拖动属性，还必须添加一个ondragstart事件处理程序，并在dataTransfer对象中保存了一些信息。

　　5.dropEffect 与 effectAllowed

　　　　利用dataTransfer对象，可不光是能够传输数据，还能通过它来确定被拖动的元素以及作为放置目标的元素能够接受什么操作。为此，需要访问dataTransfer对象的两个属性：dropEffect和effectAllowed。

　　　　其中，通过dropEffect属性可以知道被拖动的元素能够执行哪种放置行为。这个属性有下列4个可能的值。

　　　　　　

　　　　　　1. "none"：不能把拖动的元素放在这里。这是除文本框之外所有元素的默认值。

　　　　　　2. "move"：应该把拖动的元素移动到放置目标。

　　　　　　3."copy"：应该把拖动的元素复制到放置目标。

　　　　　　4."link"：表示放置目标会打开拖动的元素（但拖动的元素必须是一个链接，有URL）。

　　　　　　要使用dropEfect属性，必须在ondraggenter事件处理程序中针对放置目标来设置它。

　　　　dropEffect属性只有搭配effectAllowed属性才有用。effectAllowed属性表示允许拖放元素的哪种dropEffect，effectAllowed属性可能的值如下。

　　　　　　 1."uninitialized"：没有该被拖动元素放置行为。

　　　　　　 2."none"：被拖动的元素不能有任何行为。

　　　　　　 3."copy"：只允许值为“copy”的dropEffect。

　　　　　　 4."link"：只允许值为“link”的dropEffect。

　　　　　　 5."move":只允许值为“move”的dropEffect。

　　　　　　 6."copyLink"：允许值为“copy”和“link”的dropEffect。

　　　　　　 7."copyMove"：允许值为“copy”和”link”的dropEffect。

　　　　　　 8."linkMove"：允许职位“link”和”move”的dropEffect

　　　　　　 9."all"：允许任意dropEffect。

　　　　　　必须在ondraggstart事件处理程序中设置effectAllowed属性。

　　图片在两个div中拖放示例

　　　HTML部分

   <div id="d1">
     <img id="myimg" src="bg.jpg" />
   </div>

   <div id="d2"></div>

　　js

     //获取图片及两个div元素
     var d1 = document.getElementById("d1"),
         myimg = document.getElementById("myimg"),
         d2 = document.getElementById("d2");
     //给图片绑定dragstart事件
     myimg.addEventListener("dragstart",MyDragStart);

     //给第二个div绑定dragover,drop两个事件
     d2.addEventListener("dragover",MyDragover);
     d2.addEventListener("drop",MyDrop);
     //给第一个div绑定dragover,drop两个事件
     d1.addEventListener("dragover",MyDragover);
     d1.addEventListener("drop",MyDrop);

     //图片开始拖拽事件的处理函数
     function MyDragStart(event){
         var mydata = myimg.id;//保存ID值
         var trans = event.dataTransfer;
         trans.setData("text",mydata);
     }
     //该处理函数是为阻止页面的默认行为
     function MyDragover(){
         event.preventDefault();
     }
     //drop处理函数
     function MyDrop(event){
         //
         var trans = event.dataTransfer;//获取数据保存对象
         var mysrc = trans.getData("text");//图片id
         var ele = document.getElementById(mysrc);//获取到图片对象
         if (ele != event.srcElement)//判断图片是否移动
         {
             event.srcElement.appendChild(ele.parentNode.removeChild(ele));//将img元素剪切到目标div中
         }

         trans.clearData("text");//清除数据
     }