实现元素的拖拽

现在会有很多奇特的需求,比如说将一个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的子元素