实现元素的拖拽

现在会有很多奇特的需求,比如说将一个div中的p标签用拖拽就可以把这个p标签移入到另一个div中
这个时候就需要用的h5中的新特性—draggable
1.给被拖拽的元素绑定这个draggable属性

被拖拽的元素

这样就已经可以实现拖拽,但是无法移入到另一个div中
2.这是因为浏览器默认阻止拖拽,这个时候就需要对目标div进行处理,让浏览器不阻止
document.ondragover = function(e){
// 阻止浏览器阻止拖拽
e.preventDefault()
}
这个时候目标元素就可以任意被拖拽,但是还需要实现放到另一个div中
3.这个时候需要用到一个事件—ondrop,当目标元素移到目标div中的时候,这个时候松开鼠标,我们希望这个元素留在这个div中
document.ondrop = function(e){
//前面已经获取了被拖拽元素
this.appendChild(被拖拽元素)
}
当鼠标松开的时候会触发ondrop这个事件,然后将之前的被拖拽元素成为目标div的子元素