<!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. 【Linux】 Centos7 安装 mysql-8.0

    本文介绍使用rpm包安装mysql, 以 mysql-8.0.17-1.el7.x86_64.rpm-bundle.tar 为例: 1.下载 MySQL下载地址:https://dev.mysql.c ...

  2. BZOJ 3653: 谈笑风生(主席树)

    传送门 解题思路 首先对于一个\(a\)来说,要求\(b\)和\(c\),那么\(a,b,c\)一定在一条链上.把\(b\)分类讨论,如果\(b\)是\(a\)的祖宗,这个方案数就很好统计了,就是\( ...

  3. Mysql create constraint foreign key faild.trouble shooting method share

    mysql> create table tb_test (id int(10) not null auto_increment primary key,action_id int(10) not ...

  4. Vue实现无痕刷新

    一.什么是无痕刷新 在不刷新浏览器的情况下,实现页面的刷新. 传统的刷新页面方式 window.location.reload()原生 js 提供的方法 this.$router.go(0)vue 路 ...

  5. Java.util包教程

    java.util.ArrayDeque 类提供了可调整大小的阵列,并实现了Deque接口.以下是关于阵列双端队列的要点: 数组双端队列没有容量限制,使他们增长为必要支持使用. 它们不是线程安全的;如 ...

  6. Msys2升级后不能编译

    Msys2升级后不能编译 */--> code {color: #FF0000} pre.src {background-color: #002b36; color: #839496;} cod ...

  7. kmp与扩展kmp模板

    kmp 1 #include <algorithm> 2 #include <iostream> 3 #include <cstring> 4 #include & ...

  8. 将Eclipse项目转换成AndroidStudio项目过程中遇到的问题以及解决方法

    将Eclipse项目转换成AndroidStudio项目也不是第一次了,昨天转的时候遇到几个问题: 首先将项目导入androidstudio,导完后报错: 问题一: Error:java.util.c ...

  9. 2018-8-10-win10-uwp-json

    title author date CreateTime categories win10 uwp json lindexi 2018-08-10 19:16:53 +0800 2018-2-13 1 ...

  10. ES模块的基本用法常见使用问题

    本文作者:高峰,360奇舞团前端工程师,W3C WoT工作组成员. ES6中引入了模块(Modules)的概念,相信大家都已经挺熟悉的了,在日常的工作中应该也都有使用. 本文会简单介绍一下ES模块的优 ...