<script>
// 七个h5拖拽事件
const box = document.getElementById('box')
const left = document.getElementById('left')
const right = document.getElementById('right')
let num = 0
//ondragstart 拖拽开始的时候,进行移动
right.οndragstart= function(){
console.log("lll")
this.style.backgroundColor = "#ff0"
}
//ondrag 拖拽途中
right.ondrag = function(){
// console.log(num++)
}
//ondragend 拖拽结束松开鼠标时
right.ondragend = function(){
this.style.backgroundColor = "#eee"
}
//ondragenter 当有东西拖拽进来时
left.ondragenter = function(){
this.innerHTML = "释放鼠标"
this.style.backgroundColor="#f00"
}
//ondragover 拖拽元素持续在目标身上摩擦移动
left.ondragover = function(e){
// console.log("目标拖拽元素持续在自己身上摩擦移动")
// console.log(num++)
e.preventDefault();
e.stopPropagation(); //需要阻止时间冒泡和事件捕获
}
//ondragleave 当拖拽元素离开目标元素时
left.οndragleave=function(){
this.style.backgroundColor="#f60"
this.innerHTML="拖拽到这里来"
// document.body.box.removeChild(right)
}
// ondrop 拖拽元素丢尽目标元素身上
left.ondrop = function(){
this.innerHTML="拖拽到这里来"
this.style.backgroundColor="#f60"
console.log("拖拽元素丢尽目标元素身上")
// document.body.removeChild(right);
document.body.box.removeChild(right)
}
</script>