<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="div1" class="div1" style="width: 100px;height:100px;background: chocolate">
<p class="pe" id="pe" draggable="true">抱我拽走啊 </p> <!-- draggable 可以把文字拽走但是不能完全实现-->
</div>
<div class="div2" id="div2" style="width: 100px;height:100px;background: red" draggable="true"></div>
<script>
// var p=document.querySelector("p");
// var div2=document.querySelector(".div2");
// var div1=document.querySelector(".div1");
// var obj=null;
// document.ondrag=function(e){
// }
document.ondragstart=function(e){
//obj=e.target;
e.dataTransfer.setData("text/html",e.target.id);
}
// document.ondragleave=function(e){
// }
// document.ondragend=function(e){
// }
// document.ondragenter=function(e){
// }
document.ondragover=function(e){ //如果想触发ondrop事件,那就必须在这个位阻止浏览器的默认行为
e.preventDefault();
}
document.ondrop=function(e){
// e.target.appendChild(obj);
var id=e.dataTransfer.getData("text/html");
e.target.appendChild(document.getElementById(id));
}
// document.ondragleave=function(e){
// }
</script>
</body>
</html>
<!--
//dataTransform(数据的存储和获取) 只能在ondrop里面取值
e.dataTransfer.setData(); setData(format,data) format:数据的类型text/html和text/uri-list Data:一般来说是字符串
e.dataTransfer.getData();
var id=e.dataTranster.getdata("text/html");
e.target.appendChild(document.getElementById(id));
//拖拽元素
1.ondrag 应用于拖拽元素,整个拖拽过程都会被调用
2.ondragstart应用于拖拽元素,当拖拽开始时调用
3.ondragleave 应用于拖拽元素,当鼠标离开拖拽元素调用
4.ondragend 应用于拖拽元素,当拖拽结束时调用
//目标元素
1.ondragenter 应用于目标元素,当拖拽元素进入时调用
2.ondragover应用于目标元素,停留咋目标元素身上时调用
3.ondrop 应用于目标元素,当在目标身上松开鼠标时调用
4.ondragleave应用于目标元素,当鼠标离开目标元素是调用
-->