实现H5的拖放

本文主要是介绍实现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原来的位置

这篇关于实现H5的拖放的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---