<!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. TIM4定时器功能设置

    一.初始化过程 /*********************************************************************** 利用TIM4定时器作为计时,每个0.1 ...

  2. POJ 2955 Brackets （区间dp入门）

    Description We give the following inductive definition of a “regular brackets” sequence: the empty s ...

  3. 【LeetCode 41】缺失的第一个正数

    题目链接 [题解] 先明确一点假设给的数字有n个. 那么最后的答案最情况下就是n+1 首先我们先判断一下所给的数组里面有没有1 如果没有直接返回1 否则. 把数组中所有的范围超过n或者小于1的数字全都 ...

  4. OC学习篇之---类目的概念和使用

    上一篇文章介绍了OC中的@class关键字的使用http://blog.csdn.net/jiangwei0910410003/article/details/41774747,这一篇我们介绍一下,O ...

  5. jquery实现简单的搜索功能

    管理系统中需要实现导航列表的搜索功能,写了一个简单的小栗子: <!DOCTYPE html> <html lang="en"> <head> & ...

  6. 关于Burp Suite不能抓包的解决方法

    一.Burp Suite有时能抓到包,有时不能抓到包 解决方法: 出现这种问题的原因就是代理没有设置成全局的,只是设置成了局部的. 打开IE浏览器,依次打开工具->Internet 属性-> ...

  7. 使用Intent实现Activity之间传值与跳转(转)

    转:http://blog.csdn.net/cjjky/article/details/6337447 在一个Android的应用程序中,很少只存在一个Activity,一般都有多个Activity ...

  8. gulp压缩css

    gulp压缩css,选用的依赖是gulp-clean-css,在压缩大型项目时还对用到一个dom流压缩文件选取的依赖gulp-dom-src 依赖安装:npm i gulp-clean-css 依赖安 ...

  9. JS - 计算两个数组的交集、差集、并集、补集（多种实现方式）

    方法一:最普遍的做法 使用 ES5 语法来实现虽然会麻烦些,但兼容性最好,不用考虑浏览器 JavaScript 版本.也不用引入其他第三方库. 1,直接使用 filter.concat 来计算 var ...

  10. Struct和Union的sizeof计算

    struct 结构体的大小不是简单的成员相加,要考虑存储空间的字节对齐 1.空结构体的大小为1 2.含有static的结构体在计算大小时不算上static变量,因为static存储在全局数据空间,而s ...