HTML5提供的拖拽功能

HTML5中要实现拖拽效果需要两个元素，即需要拖拽的文件和要拖拽到哪里去，我们把需要拖拽的文件称之为源元素，要拖拽到的地方称为目标元素。

源元素事件有3个：1. dragstart    当鼠标开始拖放时被触发；

                                  2. drag   当鼠标拖放过程中被触发,类似于mousemove事件

                                  3. dragend   当鼠标结束拖放时被触发

目标元素事件有4个：1.dragenter   当鼠标拖放进入到目标元素内时被触发

                                      2.  drop   当鼠标实现拖放效果时被触发, 注意，该事件在默认情况下,没有被触发，因为HTML页面默认情况下,不允许拖放，所以需要使用事件对象event.preventDefault()方法来阻止页面的默认行为

                                      3. dragover   当鼠标到达目标元素时被触发

                                      4.dragleave  当鼠标拖放离开目标元素时被触发

在拖拽中需要使用到dataTransfer对象，该对象可以将源元素的信息(数据),存储在这里，并将存储在该对象的源元素信息,，提供给目标元素，类似于剪切板功能。主要方法有三种：

 1.   setData()   设置(源元素)数据  ，  在源元素事件中使用，该方法以指定格式给dataTransfer对象赋予数据，data为设置的数据内容

 2.   getData()   获取设置的数据    ，   在目标元素事件中使用

 3.   clearData()    清除(设置的)数据  ，   所有的数据内容,存储在浏览器内存中，当使用完毕数据内容时,清除

下面是一个简单的拖拽功能代码段：

第一步 页面上定义两个div，实现将d1内的图片元素拖拽到d2内

<!-- 源元素 --><div id="d1"><img id="myimg" src="Tulips.jpg" width="256" /> </div>

<!-- 目标元素 --><div id="d2"></div>

第二步 给两个div设置简单样式 

        #d1 {
width : 300px;
height : 300px;
border : solid 1px black;
float : left;
}
#d2 {
width : 300px;
height : 300px;
border : solid 1px black;
float : right;
}

第三   js代码

var myimg = document.getElementById("myimg");  // 1. 获取源元素
var ele = document.getElementById("d2");   // 2. 获取目标元素
myimg.addEventListener("dragstart",MyDragStart);   // 3. 为源元素绑定dragstart事件
ele.addEventListener("dragover",MyDragOver);  // 4. 为目标元素绑定dragover和drop事件
ele.addEventListener("drop",MyDrop);

   //  实现事件的处理函数， 将源元素的数据,存储在dataTransfer对象中
function MyDragStart(event){
var mydata = myimg.src;// 1. 获取源元素数据
var trans = event.dataTransfer;// 2. 获取dataTransfer对象
trans.setData("text",mydata);   //3. 调用setData(type,data)方法
}

        function MyDragOver(event){  
event.preventDefault();   // 4.阻止页面的默认行为
}

   // 从dataTransfer对象中,获取之前设置的数据

       function MyDrop(event){
var trans = event.dataTransfer;// 1. 获取dataTransfer对象
var mysrc = trans.getData("text");//  2. 使用getData(type)方法获取设置的数据，注意，之前调用setData()时,传递的是什么值,这里的 type就传递什么值
ele.innerHTML = "<img src='"+mysrc+"' width='256'/>";   // 3. 将源元素(图片),添加到目标元素中
trans.clearData("text");     // 4. 清除dataTransfer对象中的数据
}