<!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. 【Beta阶段】第十一次Scrum Meeting!

    第十一周会议记录 [Beta阶段]第十一次Scrum Meeting! 一.每日任务内容 本次会议为第十一次Scrum Meeting会议~ 本次会议主要探讨了各自进展以及后续要继续开展的工作. 小组 ...

  2. centos7 安装PHP5.3 报错undefined reference to symbol '__gxx_personality_v0@@CXXABI_1.3'

    系统:centos 7 原有PHP版本:5.6.27,5.4.45 试着安装nginx+多php版本,首先安装了5.6和5.4的版本,一帆风顺,但是在安装5.3.29版本时,出现问题了,configu ...

  3. IE11“__doPostBack”未定义”

    IE 11 下<asp:LinkButton> 点击出现 “__doPostBack”未定义” 在项目根目录 App_Browsers 下新建 浏览器文件(.browser),让其与IE1 ...

  4. 前端每日实战：58# 视频演示如何用纯 CSS 创作一只卡通鹦鹉

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vrRmWy 可交互视频 此视频是可 ...

  5. 使用JQuery对页面进行绑值

    使用JQuery对页面进行绑值 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  6. Spring import配置文件使用占位符

    import使用占位符 连接池切换导入配置的代码: <import resource="classpath:META-INF/spring/spring-${db.connection ...

  7. python+tushare获取上市公司财务报表：资产负债表

    接口:balancesheet 描述:获取上市公司资产负债表 积分:用户需要至少500积分才可以调取,具体请参阅本文最下方积分获取办法 注:tushare包下载和初始化教程,请查阅我之前的文章 提示: ...

  8. __init__ 和__new__的区别

    __init__和__new__的区别 __init__是当实例对象创建完成后被调用的,然后设置对象属性的一些初始值. __new__是在实例创建之前被调用的,因为它的任务就是创建实例然后返回该实例, ...

  9. 14-vim-替换命令-01-替换

    命令 英文 功能 工作模式 r replace 替换当前字符 命令模式 R replace 进入替换模式 替换模式 R命令进入替换模式,输入新字符替换当前光标所在位置的字符,替换完成后,按下ESC可以 ...

  10. App加载主要流程

    主要流程 Application OnCreate 加载第三方的sdk 加载自身的逻辑 发送远程数据请求 xxx.json 渲染界面 List