实现H5的拖放详解手机开发

HTML5在标准中增加了对元素拖放(Drag and Drop)的支持，这有利于实现更好的交互和更极致的用户体验，通过js配合draggable属性，就能实现这样的效果

draggable属性

draggable属性不支持IE8之前的浏览器。当我们想让一个元素是可拖动的，我们必须把通过js这个属性设为true

   <div id="icon"></div> 
   <div id="box"></div>

   #box { 
      width: 200px; 
      height: 200px; 
      margin-top: 10px; 
      border: 2px dotted red; 
   } 
   #icon {  
      width: 100px; 
      height: 100px; 
      /* 增加背景颜色加强视觉效果 */ 
      background-color: orange;   
   }

   var icon = document.getElementById('icon'); 
   icon.draggable = true;

在添加以上属性之后，我们按住icon并拖拽，已经可以拖动了。

实现拖放

我们会发现在松开鼠标左键时，icon还会默认回到原来的位置。我们想把这个icon放到下面的虚线框中，需要解决两个问题。首先，当logo拖动到虚线框上方时，会不断触发box的ondragover事件，而这一事件是默认无法将元素放到其他元素中，因此我们需要使用事件参数的preventDefault()方法来取消该事件的默认行为

   var box = document.getElementById('box'); 
   box.ondragover = function(e){ 
       e.preventDefault(); 
   }

接下来，我们在box上松开鼠标左键，会出发box的ondrop事件，在这个事件中，我们需要创建代码来将icon放进去，使用appendChild就可以

   box.ondrop = function(e){ 
       this.appendChild(icon) 
   }

注意，这边被拖动的元素一旦被添加到box的子元素中，在原来的位置dom节点就消失了，在这个例子中，意味者下面的box框会上移占据icon原来的位置