<!DOCTYPE HTML>
<html>
  <head>
      <title>拖动事件</title>
    <style>
        *{padding: 0;margin:0}
        body{font-size:14px;font-family: "微软雅黑";background:#333}
        #box1{width:60px;height:80px;background:#888;text-align:center;border:1px solid #ccc;}
        #box2{width:320px;height:420px;background:#fff;position:absolute;right:0;bottom:0}
    </style>
  </head>
  <body>
      
      <div id="box1" draggable="true">
          <span draggable="true">Box1</span>
          
          <a href="#">Link</a>
      </div>
      
      <div id="box2" draggable="true">
         Box2
         <img src=""/>
      </div>
      <script type="text/javascript">
          /*
              在html5新特性：元素的拖放draggable
              ndragstart:拖拽开始 onmousedown
              ondrag:拖动中 onmonsemove
              ondragend:拖放结束:onmouseup
 
              针对当一些进入目标时候执行的回调函数,用途（ 购物车）
                ondragenter:元素进入目标区域时触发
                ondragover:元素在目标区域上时触发
                ondragleve:元素从目标区域离开时触发
                ondrop:有元素进入在目标区域内释放时触发
          */
          window.onload = function(){
              var boxDom1 = document.getElementById("box1");
              var boxDom2 = document.getElementById("box2");
              
              /*拖动元素事件 Start*/
              boxDom1.addEventListener("dragstart", function(){
                  console.log("box1开始了拖拽了--dragstart");
                  
              }, false);
              
              boxDom1.addEventListener("drag", function(e){
                  console.log("box1拖拽中--drag");
              }, false);
              
              
              boxDom1.addEventListener("dragend", function(){
                  console.log("box1拖放结束--dragend");
                  
              }, false);
              
              boxDom1.addEventListener("dragover", function(e){
                  console.log("box1有元素在其上方--dragover");
                  e.preventDefault();
              }, false);
              /*拖动元素事件 End*/
              
              /*目标元素事件 Start*/
              boxDom2.addEventListener("dragover", function(e){
                  console.log("box2有元素在目标区域上方dragover");
                  //此处要阻止事件冒泡，否则drop事件不能触发
                  e.preventDefault();
              }, false);
              
              boxDom2.addEventListener("dragenter", function(){
                  console.log("box2 有元素进入目标区域--dragenter");
              }, false);
              
              boxDom2.addEventListener("dragleave", function(){
                  console.log("box2有元素离开目标区域--dragleave");
              }, false);
              
              
              boxDom2.addEventListener("drop", function(){
                  console.log("box有元素在目标区域释放--drop");
              }, false);
              /*目标元素事件 End*/
          };
      
      </script>
  </body>
</html>

drag事件的更多相关文章

  1. HTML5--拖动02-dragstart、drag、dragenter、dragover、dragleave、drop、dragend属性

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. DOM事件类型详解

    一.表单事件: input事件当<input>.<textarea>的值发生变化时触发.此外,打开contenteditable属性的元素,只要值发生变化,也会触发input事 ...

  3. javascript高级程序设计---拖拉事件

    拖拉事件 拖拉指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里. 拖拉的对象有好几种,包括Element节点.图片.链接.选中的文字等等.在HTML网页中, ...

  4. HTML5 drag & drop 拖拽与拖放简介

    DataTransfer 对象:退拽对象用来传递的媒介,使用一般为Event.dataTransfer. draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如 ...

  5. Win7下的DragEnter、DragDrop事件不触发的解决方案

    Win7与原来的XP和Win2003相比,安全控制方面更严格.比如,当我们以administrator登陆XP或Win2003时,运行所有的程序即是以管理员的身份启动的.但当以administrato ...

  6. 原生 drag drop HTML5

    drag事件( dragstart -- drag -- dragend )   当按下鼠标开始drag一个可以拖动的对象时,触发dragstart事件,如果元素是不可拖动的话,会出现一个不可拖动的图 ...

  7. HTML DOM 事件对象 ondragend 事件

    学习网站:http://www.runoob.com/jsref/event-ondragend.html 定义和用法 ondragend 事件在用户完成元素或首选文本的拖动时触发. 拖放是 HTML ...

  8. javaScript drag对象进行拖拽使用详解

    目录 drag简介 兼容性 drag事件 拖拽流程 DataTransfer对象 drag拖放桌面文件 drag实例 小结 drag简介 HMTL5提供的支持原生拖拽的实现 兼容性如何? 桌面端的支持 ...

  9. 关于d3.js 将一个element 拖拽到另一个element的响应事件

    rt 正在做机柜可视化, 一个需求是能拖拽左侧列表的设备名称, 拖到右侧42U机柜中,并将设备图片放置在对应机柜位置上. 开始的时候一切都很顺利,点击左侧设备名称,添加一个g容器,将设备名称作为tex ...

随机推荐

  1. Android中的ImageView的getDrawableCache获取背景图片的时候注意的问题

    获取ImageView的背景图片使用getDrawableCache方法,不要使用getDrawable方法,后者获取不到图片的. 1.在调用imageView.getDrawableCache()之 ...

  2. window10安装mysql-5.7.20-winx64.zip

    window10安装mysql--winx64.zip 原文 https://www.cnblogs.com/ericli-ericli/p/6916285.html D:\share\src\win ...

  3. 为什么我markdown里的数学公式全崩了？？？

    目录 try a try ac is ok Typecho博客 https://www.diyifanwen.com/fanwen/dangyuanxindetihui/2665516.htm htt ...

  4. 接口自动化测试框架-AIM2.0

    跳转到3.0版本https://www.cnblogs.com/df888/p/12031649.html AIM是我用python搭建的第一款接口自动化测试框架,随着技术的提升,框架也在升级,故有了 ...

  5. 卷积实现 python

    import sys h, w = input().strip().split() h = int(h) w = int(w) img = [] for i in range(h): line = s ...

  6. Joda-Time 入门

    Joda-Time 令时间和日期值变得易于管理.操作和理解.事实上,易于使用是 Joda 的主要设计目标.其他目标包括可扩展性.完整的特性集以及对多种日历系统的支持.并且 Joda 与 JDK 是百分 ...

  7. List、Map、Set三个接口存取元素时，各有什么特点

    List接口以特定索引来存取元素,可以有重复元素 Set接口不可以存放重复元素(使用equals方法区分是否重复) Map接口保存的是键值对(key-value-pair)映射,映射关系可以是一对一或 ...

  8. 2019-8-31-matlab-画图

    title author date CreateTime categories matlab 画图 lindexi 2019-08-31 16:55:59 +0800 2018-2-13 17:23: ...

  9. 2019-8-31-How-to-parse-version-range

    title author date CreateTime categories How to parse version range lindexi 2019-08-31 16:55:58 +0800 ...

  10. Apache Shiro反序列化远程代码执行

    一.漏洞利用 wget https://raw.githubusercontent.com/sv3nbeast/ShiroScan/master/moule/ysoserial.jar 反弹shell ...