<!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=" 100px;height:100px;background: chocolate"> <p class="pe" id="pe" draggable="true">抱我拽走啊 </p> <!-- draggable 可以把文字拽走但是不能完全实现--> </div> <div class="div2" id="div2" style=" 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应用于目标元素,当鼠标离开目标元素是调用 -->