拖拽接口的使用

<div class="div1">
<!-- draggable 属性设置为 true,元素可拖动 -->
  <p id="isp" draggable="true">拖拽元素</p>
</div>
<div id="div2">
  <p>目标元素</p>
</div>

 var p=document.getElementById("isp");
 var div2=document.getElementById("div2");

 

拖拽元素 

/*
  应用于被拖拽元素的事件
   ondrag        应用于拖拽元素，整个过程都会调用 持续触发
   ondragstart   应用于拖拽元素,开始时调用
   ondragleave   应用于拖拽元素,当鼠标离开拖拽元素时调用
   ondragend     应用于拖拽元素,事件结束调用
*/
    p.ondrag=function(){
     console.log("ondrag")
    }
     p.ondragstart=function(){
     console.log("ondragstart")
    }
     p.ondragleave=function(){
     console.log("ondragleave")
    }
     p.ondragend=function(){
     console.log("ondragend")
    }

目标元素

 /*
  应用于目标元素
   ondragenter   进入目标元素时调用
   ondragover    停留在目标元素上时调用  持续触发
   ondrop        在目标元素上松开鼠标时调用
   ondragleave   当鼠标离开目标元素时调用
*/
    div2.ondragenter=function(){
    console.log("ondragenter")
   }
    div2.ondragover=function(e){
    //console.log("ondragover")
    e.preventDefault();  //可以使ondrop事件触发
   }
   // 浏览器默认会阻止ondrop事件，必须在ondragover中阻止浏览器默认行为
    div2.ondrop=function(){
    console.log("ondrop")
    //将拖拽元素添加到目标元素中
    this.appendChild(p)
   }
    div2.ondragleave=function(){
    console.log("ondragleave")
   }

多个元素实现拖拽

document .ondragleave=function(e){
    console.log(e)
   }