拖放API

在HTML5之前，可以使用mousedown,mousemove,mouseup来实现拖放操作，但是这个只支持在浏览器内部的拖放，但是在HTML5中，已经支持在浏览器和其他应用程序之间的数据互相拖动，同时也简化了关于拖放之间的代码

实现拖放的步骤

1.将想要拖放的对象元素的draggable属性设置为true(draggable="true"）,这样才能将这个元素进行拖放，另外，img元素和a元素必须指定href,默认允许拖放

2.编写和拖放有关的事件处理代码

                                            拖放存在的事件

dragstart                      被拖放的元素                                  开始拖放操作

drag                             被拖放的元素                                  拖放过程中

dragenter                     拖放过程中鼠标经过的元素            被拖放的元素开始进入本元素的范围内

dragover                      拖放过程中鼠标经过的元素            被拖放的元素正在本元素范围内移动

dragleave                    拖放过程中鼠标经过的元素             被托放的元素离开本元素的范围

drop                             拖放的目标元素                               有其他元素被拖放到了本元素中

dragend                       拖放的对象元素                               拖放操作结束

     开始拖动把要拖动的数据存入DataTransfer对象（setData()）方法，DataTransfer对象专门用来存放拖动时要携带的数据，它可以被设置为拖动事件对象的dataTransfer属性。

setData方法中的第一个参数是携带数据种类的字符串，第二个参数是要携带的数据，第一个参数中表示数据种类的字符串里面只能填入类似于"text/plain“或者"text/html"

的表示MIME类型的文字，不能填入其他的文字

     如果把 "dt.setData("text/plain"，你好)"改为"dt.setData("text/plain",this.id)",因为吧被拖动的元素id当成了参数，所以携带的数据就是被拖动元素中的数据了，因为浏览器在使用getData()方法读取数据时会自动读取该元素中的数据

   针对拖放的目标元素，必须在dragend或dragover事件内调用“事件对象preventDefault()方法”，因此在默认情况下，拖放的目标元素是不允许接受元素的，为了吧元素

拖放到其中，必须把默认处理给关闭掉，

  目标元素接受到被拖放的元素后，执行getData()方法从DataTransfer哪里获得数据，getData()方法的参数为setData(）方法中指定的数据种类

  要实现拖放过程，必须在目标元素的drop事件中关闭默认处理（拒绝被拖放），否则目标元素不能接受被拖放的元素

  要实现拖放过程，还必须设定整个页面为不执行默认处理（拒绝被拖放），否则拖放处理也不能实现，因为页面是先于其他元素接收拖放的，如果页面上拒绝拖放，那么页面上其他元素就不能接受拖放了

  要使元素可以被拖放，首先必须把该元素的draggable属性设定为true,另外，为了让这个示例在所有支持拖放API的浏览器内都能正常运行，需要指定“-webkit-user-drag:element”这种webkit特有的css属性

设定拖放时的视觉效果

dropEffect和effectAllowed属性结合起来可以设定拖放时的视觉效果

1.effectAllowed属性表示当一个元素陀噢对那个时所允许的视觉效果，一般在ondragstart事件中设定，允许谁的值none,copy,copyLink,link,linkMove,move,all,unintialize

2.dropEffect属性表示实际拖放时候的视觉效果，一般在ondragover事件中指定，允许设定的值为none,copy,link,move,

两个属性所表示的允许的视觉效果范围内，规则如下所示：

1.如果effectAllowed属性设定的值为none,则不允许拖放元素

2.如果dropEffect属性设定为none,则不允许被拖放到目标元素中

3.如果effectAllowed属性设定为all或者不设定，则dropEffect属性允许被设定为任何值，并且按照指定的视觉效果进行显示

4.如果effectAllowed属性设定为具体效果，dropEffect属性也设定了具体的视觉效果，则两个具体效果值必须完全相等，否则不允许将被拖放元素拖放到目标元素中

source.addEventListner("dragstart",function(ev))
{
    var dt=ev.dataTransfer;
    //设定effectAllowed属性
    dt.effectAllowed='copy';
    dt.setData("text/plain","你好")
}，false）；
dest.addEventListner("dragover",function(ev))
{
var dt=ev.dataTransfer;
//设定dropEffect属性
dt.dropEffect='copy';
ev.preventDefault();
},false);

自定义拖放图标：

DataTransfer对象有一个setDragImage方法，这个方法有三个参数，第一个参数image设定为拖放图标的图标元素，第二个参数x为拖放图标离鼠标指针的x轴方向的位移量，第三个参数y为拖放图标离鼠标指针的y轴方向的位移量

//创建图标元素

var dragIcon=document.createElement('img');

//设定图标来源

dragIcon.src='http"//twivatar.org/teitter/mini';

source.addEventListner("dragstart",function(ev)){

var dt=ev.dataTransfer;

//设定自定义图标

dt.setDragImage(dragIcon,-10,-10);

dt.setData("text/plain","aaa");