页面上元素的拖拽效果html5

页面上元素的拖拽效果html5（goole浏览器测试）

网页上把一张图片、或一段文字，拖到指定的位置；

1. 创建拖拽对象；
   
   1. 给拖拽的对象设定draggable属性，true，false，auto（浏览器自己判断是否能被拖拽），
   2. 设定数据（文本或图片）
   3. function drag(e){
e.dataTransfer.setData('Text', e.target.id);//拖拽对象一定要设定id
}//看下面
2. 处理拖拽事件；
   
   1. dragstart:当元素开始拖拽时触发；
      
   2. drag：在元素拖拽过程中触发；
   3. dragend：元素拖拽结束时触发；
3. 创建投放区（拖拽完后还要阻止浏览器的默认行为）；
   
   1. 接收数据，
      
      1. var data= e.dataTransfer.getData('Text');
   2. 把数据放到目标中去；
      1.e.target.appendChild(document.getElementById(data));
   3. 阻止浏览器默认的行为；
      
      1. e.preventDefault()

---