Code area
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>拖拽操作</title>
<style>
.div1 {
width:300px;
height:300px;
background-color:green;
border:1px solid red;
float:left;
}
div > p {
color:white;
padding-left:5px;
}
.aa {
width:150px;
height:30px;
background-color:blue;
}
.div2 {
width:300px;
height:300px;
background-color:green;
border:1px solid red;
float:left;
margin-left:5px;
}
</style>
<body>
<div class="div1" id="div1">
<p class="aa" id="ab" draggable="true"> 我是被拖拽元素</p>
</div>
<div class="div2" id="div2"></div>
</body>
<script>
var p=document.querySelector("#ab");
var div2=document.querySelector("#div2");
var div1=document.querySelector("#div1");
//被拖拽元素
p.ondragstart = function(){
// console.log("ondragstart");
}
p.ondragleave = function(){
// console.log("ondragleave");
}
p.ondragend = function(){
// console.log("ondragend");
}
//进入目标元素
div2.ondragenter = function(){
// console.log("ondragenter");
}
div2.ondragover = function(e){
//console.log("ondragover");
e.preventDefault();
}
div2.ondrop = function(){
// console.log("ondrop");
div2.appendChild(p);
}
div2.ondragleave = function(){
// console.log("ondragleave");
}
div1.ondragenter = function(){
// console.log("ondragenter");
}
div1.ondragover = function(e){
// console.log("ondragover");
e.preventDefault();
}
div1.ondrop = function(){
// console.log("ondrop");
div1.appendChild(p);
}
div1.ondragleave = function(){
// console.log("ondragleave");
}
</script>
</html>
