HTML5拖放

拖放事件

想要触发拖放事件，需要先将被拖放元素的draggable属性设置为true，容器不需要设置draggable

拖放事件的调用 obj.事件    obj.drag

拖事件

dragstart 开始拖

drag        正在拖

dragend 拖完的瞬间

放事件

dragenter鼠标进入到放被拖动元素的容器中

dragover鼠标在放被拖动元素的容器中拖动

dragleave鼠标离开放被拖动元素的容器

drop鼠标在放拖放元素的容器上面放下时触发该事件（若鼠标已经离开放拖放元素的容器，则松开鼠标不会触发改事件）

----------------------

使用时，需要在事件名前面加上on前缀

----------------------

要阻止dragover的默认事件之后，才能触发drop事件，同样，在拖放时，也需要取消dragover默认事件，才能将被拖放元素拖到容器中

阻止dragover默认事件有两种方法 1、return false; 2、给函数加参数，然后参数.preventDefault()     eg:   e.preventDefault;

container.ondrop=function(){this.appendChild(oDiv);}//实现拖动

----------------------

setDate(‘存放数据的变量’,数据);//保存数据

getDate(‘存放数据的变量’,数据);//获取数据

eg:

所有拖拽事件都有一个dataTransfer属性，它包含着拖拽数据

eg :通过id拖拽obj

obj.ondragstart=function(e){e.dataTransfer.setData('id',this.id);}//e表示事件对象，在此处表示被拖动的obj

container.ondragover=function(){return false;//取消默认事件}

container.ondrop=function(e){

var id=e.dataTransfer.getData('id');//获取之前存储的id

var node = document.getElementById(id);

this.appendChild(node);}

------------------------

设置元素拖放时显示为图片

var img = new Image();//创建一个图像节点

img.src='path.jpg';

e.setDataImage(img,x,y);//img为图像节点，x,y为鼠标偏移图片左上角的像素