拖拽原对象

//1:源对象拖动开始时
  elem.ondragstart = function(){
    console.log("drag start拖动开始");
  }
//2:源对象拖动中时
  elem.ondrag = function(){
    console.log("drag拖动中");
  }
//3:源对象拖动结束时
  elem.ondragend = function(){
    console.log("drag end拖动结束");
  }

拖拽到目标对象

//拖拽进入目标对象时
  elem.ondragenter = function(){
    console.log("drag enter进入目标");
  }
//拖拽悬停在目标对象上方时
  elem.ondragover = function(e){
    //必须阻止默认事件行为
    e.preventDefault();//使drop可以触发
    console.log("drag over悬停中");
  }
//拖拽离开目标对象时
  elem.ondragleave = function(){
    console.log("drag leave离开了");
  }
//拖拽到到目标对象上方释放
  elem.ondrop = function(){
    console.log("drop释放");
  }

简单demo：垃圾回收站


<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>拖拽事件demo</title>
  <style>
    body{text-align: center}
  </style>
</head>
<body>
<h1>拖动练习</h1>
<!-- 垃圾桶 -->
<img src="img/0.jpg" id="dustbin" />
<hr/>
<!-- 即将丢到垃圾桶的东西 -->
<div id="box">
  <img src="img/gbg1.png" id="gbg1" />
  <img src="img/gbg2.png" id="gbg2" />
  <img src="img/gbg3.png" id="gbg3" />
</div>
<script type="text/javascript">

  //1、创建变量用于保存“垃圾”的id值
  var gbgId=null;
  //2、获取所有拖动原对象
  var list=document.querySelectorAll("#box img");
  //3、遍历获取“垃圾”为其绑定事件
  for(var i=0;i<list.length;i++){
    var gbg=list[i];
    //拖拽开始时：获取当前“垃圾”的id值并赋值到gbgId里
    gbg.ondragstart=function(){
      planeId=this.id;
    }
    gbg.ondrag=function(){}//拖拽中：无动作
    gbg.ondragend=function(){}//拖拽结束后：无动作
  }
  //4、在拖拽到目标对象事件中（拖拽“垃圾”到“垃圾桶”），获取“垃圾”的id值并且从DOM删除
  dustbin.ondragenter=function(){}//拖拽进入到目标（垃圾桶）时：无动作
  //拖拽悬停在目标上时
  dustbin.ondragover=function(e){
    e.preventDefault();//阻止默认事件行为
  }
  dustbin.ondragleave=function(){}//拖拽离开目标时：无动作
  //拖拽“垃圾”到“垃圾桶”时：
  dustbin.ondrop=function(){
    var img=document.getElementById(gbgId);//获取当前“垃圾”的id
    var box=document.getElementById("box");//获取“垃圾”父级
    box.removeChild(img);//从父级里删除该当前“垃圾”
  }

</script>
</body>
</html>
© 允许规范转载