<!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. 调用windows的复制文件对话框

    function CopyFileDir(sDirName: String; sToDirName: String): Boolean; var fo: TSHFILEOPSTRUCT; begin ...

  2. 分布式系统理论基础2 ：CAP

    本文转自:https://www.cnblogs.com/bangerlee/p/5328888.html 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到 ...

  3. 【从0到1，搭建Spring Boot+RESTful API+Shiro+Mybatis+SQLServer权限系统】01、环境准备

    开发环境 windows+STS(一个针对Spring优化的Eclipse版本)+Maven+SQLServer 环境部署 1.安装SQLServer(使用版本2008R2) 自行安装,此处略过 2. ...

  4. WEBI更换数据源

    有些时候,我们需要更换数据源.例如切了系统.重新导入数据源,这样我的webi重做的工作量太大.一些变量之类的.替换数据源就很好的解决.不过它应当是对大致80%甚至100%相似的数据源.具体业务具体分析 ...

  5. PHP 遍历目录下面的所有文件及子文件夹

    //遍历文件夹下面所有文件及子文件夹 function read_all_dir ( $dir ){ $result = array(); $handle = opendir($dir);//读资源 ...

  6. 泛微weaver_oa filebrowser.jsp 任意目录遍历

    url//document/imp/filebrowser.jsp?dir=/etc/

  7. crypto 密码加密

    转自 'use strict'; var crypto = require('crypto'); /** * generates random string of characters i.e sal ...

  8. 力扣算法题—144Binary Tree Preorder Traversal

    Given a binary tree, return the preorder traversal of its nodes' values. Example: Input: [1,null,2,3 ...

  9. 7.Jmeter 快速入门教程--录制复杂web测试脚本

    Jmeter的功能简单,不需要有脚本语言的编写经验,纯图形界面添加测试场景, 用起来上手很快.但是如果手动添加每一个web(http/https)请求,费时又费力.而且有可能最后手动编写的和实际发的请 ...

  10. leetcode python翻转字符串里的单词

    # Leetcode 151 翻转字符串里的单词### 题目描述给定一个字符串,逐个翻转字符串中的每个单词. **示例1:** 输入: "the sky is blue" 输出: ...