拖放
拖放元素必须在行内设置
<p draggable = "true"> </p> //允许拖放
p.ondragstart = function(event){
//开始拖拽事件
var e = event || window.event
e.dataTransfer.setDate("msg",p.innerText)
/*表示将需要拖拽的内容获取到储存起来,准备传递
第一个参数表示传递信息的名字 自定义
第二个参数时传递内容
*/
}
box2.ondragover = function(event){
//拖拽悬停事件
var e = event||window.event
e.preventDefault()//删除浏览器默认形式
}
box2.ondrop=function(event){
var e = event||window.event
var val = date Transfer.getDate("msg")//获取msg的值
var newp = document.createElement("p")
newp.innerHTML=val
box2.appendChild(newp)
console.log(val)
box.removeChild(p)//删除之前的元素
}
所谓的拖拽事件,本质上是将原有的元素储存起来,然后在新的地方新建,再将原有的删除。