JS第一节笔记（17）————JS 拖放

拖放

拖放元素必须在行内设置

<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)//删除之前的元素
}

所谓的拖拽事件，本质上是将原有的元素储存起来，然后在新的地方新建，再将原有的删除。