页面上元素的拖拽效果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:当元素开始拖拽时触发；
      
      1. <img src="" draggable="true" ondragstart="drag(event)" id="drag1" />
   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()

---

<div id="layer1">
<img src="" draggable="true" ondragstart="drag(event)" id="drag1" />
</div>
<div id="layer2" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<script type="text/javascript">
function drag(e){
    e.dataTransfer.setData('Text', e.target.id);
}
function allowDrop(e){
    e.preventDefault();//
}
function drop(e){
    var data= e.dataTransfer.getData('Text');
    e.target.appendChild(document.getElementById(data));
    e.preventDefault();//
}
</script>