学习网站：http://www.runoob.com/jsref/event-ondragend.html

定义和用法

ondragend 事件在用户完成元素或首选文本的拖动时触发。

拖放是 HTML5 中非常常见的功能。 更多信息可以查看我们 HTML 教程中的 HTML5 拖放。

注意： 为了让元素可拖动，需要使用 HTML5 draggable 属性。

提示： 链接和图片默认是可拖动的，不需要 draggable 属性。

在拖放的过程中会触发以下事件：

    • 在拖动目标上触发事件 (源元素):

      • ondragstart - 用户开始拖动元素时触发
      • ondrag - 元素正在拖动时触发
      • ondragend - 用户完成元素拖动后触发
  • 释放目标时触发的事件:

    • ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
    • ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
    • ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
    • ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号。IE9兼容

语法

HTML 中：

<element ondragend="myScript">尝试一下

JavaScript 中：

object.ondragend=function(){myScript};尝试一下

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("dragend", myScript);尝试一下

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

实例运行：

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta charset="utf-8">

 <title>菜鸟教程(runoob.com)</title>

 <style>

 .droptarget {

     float: left;

     width: 100px;

     height: 35px;

     margin: 15px;

     padding: 10px;

     border: 1px solid #aaaaaa;

 }

 </style>

 </head>

 <body>

 <p>在两个矩形框中来回拖动 p 元素:</p>

 <div class="droptarget">

     <p draggable="true" id="dragtarget">拖动我!</p>

 </div>

 <div class="droptarget"></div>

 <p style="clear:both;"><strong>注意：</strong>Internet Explorer 8 及更早 IE 版本或 Safari 5.1 及更早版本的浏览器不支持 drag 事件。</p>

 <p id="demo"></p>

 <script>

 /* 拖动时触发*/

 document.addEventListener("dragstart", function(event) {

     //dataTransfer.setData()方法设置数据类型和拖动的数据

     event.dataTransfer.setData("Text", event.target.id);

     // 拖动 p 元素时输出一些文本

     document.getElementById("demo").innerHTML = "开始拖动 p 元素.";

     //修改拖动元素的透明度

     event.target.style.opacity = "0.4";

 });

 //在拖动p元素的同时,改变输出文本的颜色

 document.addEventListener("drag", function(event) {

     document.getElementById("demo").style.color = "red";

 });

 // 当拖完p元素输出一些文本元素和重置透明度

 document.addEventListener("dragend", function(event) {

     document.getElementById("demo").innerHTML = "完成 p 元素的拖动";

     event.target.style.opacity = "1";

 });

 /* 拖动完成后触发 */

 // 当p元素完成拖动进入droptarget,改变div的边框样式

 document.addEventListener("dragenter", function(event) {

     if ( event.target.className == "droptarget" ) {

         event.target.style.border = "3px dotted red";

     }

 });

 // 默认情况下,数据/元素不能在其他元素中被拖放。对于drop我们必须防止元素的默认处理

 document.addEventListener("dragover", function(event) {

     event.preventDefault();

 });

 // 当可拖放的p元素离开droptarget，重置div的边框样式

 document.addEventListener("dragleave", function(event) {

     if ( event.target.className == "droptarget" ) {

         event.target.style.border = "";

     }

 });

 /*对于drop,防止浏览器的默认处理数据(在drop中链接是默认打开)

 复位输出文本的颜色和DIV的边框颜色

 利用dataTransfer.getData()方法获得拖放数据

 拖拖的数据元素id(“drag1”)

 拖拽元素附加到drop元素*/

 document.addEventListener("drop", function(event) {

     event.preventDefault();

     if ( event.target.className == "droptarget" ) {

         document.getElementById("demo").style.color = "";

         event.target.style.border = "";

         var data = event.dataTransfer.getData("Text");

         event.target.appendChild(document.getElementById(data));

     }

 });

 </script>

 </body>

 </html>

效果：

HTML DOM 事件对象 ondragend 事件的更多相关文章

  1. JS事件对象与事件委托

    事件对象 包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTa ...

  2. JavaScript事件对象与事件的委托

    事件对象 包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTa ...

  3. JS事件流、事件监听、事件对象、事件委托

    JS事件流: 01.DOM级别和DOM事件 02.JS事件流:页面中接收事件的顺序 事件冒泡阶段-->处于目标阶段-->事件捕获阶段 (事件捕获总发生在事件冒泡前面) 03.捕获:从外向里 ...

  4. js跨浏览器事件对象、事件处理程序

    项目中有时候会不用jquery这么好用的框架,需要自己封装一些事件对象和事件处理程序,像封装AJAX那样:这里面考虑最多的还是浏览器的兼容问题,原生js封装如下:var EventUtil={ //节 ...

  5. 【2017-05-03】winform打印控件、事件对象和事件数据、MDI窗体容器

    一.打印控件 第一步先把打印对象搞出来. - printDocument    打印对象(将要打印的内容放到该对象里,从该对象里取内容打印) 设置他的PrintPage事件(对于要打印的每一页触发一次 ...

  6. DOM事件处理程序-事件对象-键盘事件

    事件流: 事件流--描述的是从页面中接受事件的顺序 IE  ---事件冒泡流:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). Netsc ...

  7. js：事件（注册、解绑、DOM事件流、事件对象、事件委托）

    1.注册事件 (1)传统方式注册事件 <body> <button id="b1">请点击</button> <script> va ...

  8. JavaScript事件对象与事件处理程序

    在学习之前建议请看一下事件流.事件冒泡.事件捕获 一.事件对象 事件对象:在DOM触发事件时,会产生一个事件对象event,这个事件对象包含着所有与事件相关的信息.既然event是事件对象,那么它必然 ...

  9. JS 事件对象和事件冒泡

    1.事件对象 js的事件对象中保存了当前被触发事件的一些相关的属性信息,如事件源.事件发生时的鼠标位置.事件按键等. 事件对象的获取方法: IE中可以window.event直接获取,而Firefox ...

随机推荐

  1. Spring RestTemplate中几种常见的请求方式

    https://github.com/lenve/SimpleSpringCloud/tree/master/RestTemplate在Spring Cloud中服务的发现与消费一文中,当我们从服务消 ...

  2. SpringBoot使用@Cacheable实现最简单的Redis缓存

    前言 之前我们使用过RedisTemplate来实现redis缓存,然后使用工具类来实现操作redis的存储.这样的方式好处是很自由,但是还不是最简单的处理方式.对于一些简单的应用来说,其实redis ...

  3. C++STL模板库关联容器之set/multiset

    目录 一丶关联容器简介.set/multiset 二丶演示代码. 一丶关联容器简介.set/multiset 我们的序列容器,底层都是线性表构成的. 比如 vector list deque. 关联容 ...

  4. Docker系列05—Docker 存储卷详解

    本文收录在容器技术学习系列文章总目录 1.存储卷介绍 1.1 背景 (1)docker 的 AFUS 分层文件系统 docker镜像由多个只读层叠加面成,启动容器时,docker会加载只读镜像层并在镜 ...

  5. ServletRequest HttpServletRequest 请求方法 获取请求参数 请求转发 请求包含 请求转发与重定向区别 获取请求头字段

      ServletRequest 基本概念 JavaWeb中的 "Request"对象  实际为   HttpServletRequest  或者  ServletRequest, ...

  6. 痞子衡嵌入式：飞思卡尔i.MX RT系列MCU启动那些事（8）- 从Raw NAND启动

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔i.MX RT系列MCU的Raw NAND启动. 前面铺垫了七篇启动系列文章,终于该讲具体Boot Device了,我们知道i. ...

  7. Linux find常用用法示例

    在此处只给出find的基本用法示例,都是平时我个人非常常用的搜索功能.如果有不理解的部分,则看后面的find运行机制详解对于理论的说明,也建议在看完这些基本示例后阅读一遍理论说明,它是本人翻译自fin ...

  8. Centos7-yum部署配置LAMP-之LAMP及php-fpm实现反代动态资源

    一.简介 LAMP:linux+apache+mysql(这里用mariadb)+php(perl,python) LAMMP:memcached缓存的 CGI:Common Gateway Inte ...

  9. IOS中armv7，armv7s，arm64以及i386和x86_64讲解

    一.前言问题 在iOS 开发过程中,估计比较少的人会在意armv7,armv7s,arm64这些概念,如果在意可能也是项目中出现了像下面的问题,才会想起来解决这些问题,但还是不是特别的理解,这些概念, ...

  10. SpringBoot项目部署到服务器上，tomcat不启动该项目

    今天lz把项目重新传到服务器上后,重启tomcat遇到个问题,就是这个tomcat怎么都不启动这个项目,别的项目都没事,一番查找后发现问题所在. 我们先建个SpringBoot工程,重现一下问题: 写 ...