拖拽借口 

<!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应用于目标元素,当鼠标离开目标元素是调用
 -->

 

posted @ 2020-03-08 12:46  尚宇园  阅读(88)  评论(0)    收藏  举报