html5---拖放API

一、draggable属性的设置

　　将想要拖放的元素的draggable属性设置为true，img元素和有href属性的a元素默认是允许拖放的

二、与拖放有关的事件

事件	产生事件的元素	描述
dragstart	被拖放的元素source	开始拖放操作
drag	被拖放的元素source	拖放过程中
dragenter	拖放过程中鼠标经过的元素	被拖放元素开始进入本元素范围
dragover	拖放过程中鼠标经过的元素	被拖放元素在本元素范围内移动
dragleave	拖放过程中鼠标经过的元素	被拖放元素离开本元素的范围
drop	拖放的目的地dest	有元素被拖放到本元素中
dragend	拖放的对象元素	拖放操作结束

三、DataTransfer对象：1.自定义拖放图标 2.携带数据 3.拖放的视觉效果

DataTransfer对象的属性和方法	描述
dropEffect属性	拖放的视觉效果，但是该属性值的设定必须在effectAllowed属性值允许的范围内，有复制效果，移动效果等
effectAllowed属性	允许拖放的视觉效果
type属性	携带数据的类型
clearData(DOMString format)方法	清楚DataTransfer对象中的数据，如果省略参数则是全部清除
setDta(DOMString format，DOMString data)方法	向DataTransfer对象中存入数据
getData(DOMString format)方法	读取DataTransfer对象中保存的数据
setDragImage(Element image,long x,long y)	设置拖放图标

 

function init(){
    var source=document.getElementById("source");
    var dest=document.getElementById("dest");
    source.addEventListener("dragstart", function(ev){
        var data=ev.dataTransfer;//生成dataTransfer对象
        data.effectAllowed="all";//设置允许的拖放视觉效果
        var icon=document.createElement("img");//创建图像
        icon.src="http://hdn.xnimg.cn/photos/hdn321/20091015/0955/tiny_GkFr_16185d019116.jpg";
        data.setDragImage(icon,-10,10);//设置拖放图标
        data.setData("text/plain","您好，我是被拖拽的元素");//向dataTransfer对象中追加数据
    },false);
    dest.addEventListener("dragend", function(ev){
        ev.preventDefault();//在dragend和dragover以及drop事件中，调用preventDefault方法，
//因为目标元素一般都不允许接受其他元素的到来的，因此为了使被拖放元素进入该目标元素，必须将默认处理关掉
    },false);
    dest.addEventListener("drop",function(ev){
        var data=ev.dataTransfer;
        var text=data.getData("text/plain");//获取源元素拖放时存入的数据
        dest.textContent+=text;
        ev.preventDefault();
        ev.stopPropagation();
    },false);
}
document.ondragover=function(e){
    e.preventDefault();
}
document.ondrop=function(e){
    e.preventDefault();