H5拖拽接口
<style>
.div1{
float: left;
width: 200px;
height: 200px;
border: 1px solid red
}
.div2{
float: left;
width: 200px;
height: 200px;
border: 1px solid blue
}
#pe{
background: red;
width: 100%;
line-height: 10px;
}
</style>
</head>
<body>
<div class="div1" id="div1">
<!-- 如果想拖拽元素 必须加一个属性 图片和超练级不用加 draggable-->
<p id="pe" draggable="true">试着把我拖过去</p>
</div>
<div class="div2" id="div2" ></div>
<script>
// 主要就是要学习拖拽事件 两类 1， 目标元素事件 2，被拖拽元素
/* 应用于被拖拽元素的事件
ondrag 整个拖拽过程都会调用
ondragstart 拖拽开始调用
ondragleave 鼠标离开拖拽元素时
ondragend 拖拽结束应用
*/
var p = document.querySelector('#pe')
p.ondrag =function(){
console.log('ondrag')
}
p.ondragstart =function(){
console.log('ondragstarat')
}
p.ondragleave =function(){
console.log('ondragleave')
}
p.ondragend =function(){
console.log('ondragend')
}
/* 目标元素的事件
ondragenter 进入时候
ondragover 停留在目标元素
ondrop 目标松开鼠标时
ondragleave 离开目标元素
*/
var div2 = document.querySelector('#div2')
div2.ondragenter =function(){
// console.log('ondragenter')
}
div2.ondragover=function(e){
console.log('ondragstarat')
//想触发ondrop事件 在这来组织浏览器默认行为
e.preventDefault();
}
// 浏览器阻止才能触发
div2.ondrop =function(){
// console.log('ondragleave')
// 添加
div2.appendChild(p)
}
div2.ondragleave =function(){
console.log('ondragend')
}
// 核心在于目标元素 也就是目标事件
var div1 = document.querySelector('#div1')
div1.ondragover=function(e){
console.log('ondragstarat')
//想触发ondrop事件 在这来组织浏览器默认行为
e.preventDefault();
}
// 浏览器阻止触发
div1.ondrop =function(){
console.log('ondragleave')
// 添加
div1.appendChild(p)
}
</script>
