学习网站：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. redis 系列7 数据结构之跳跃表

    一.概述 跳跃表(skiplist)是一种有序数据结构,它通过在每个节点中维持多个指向其他节点的指针,从而达到快速访问节点的目的.在大部分情况下,跳跃表的效率可以和平衡树(关系型数据库的索引就是平衡树 ...

  2. 代码实现PHP web服务器下绝对路径到Web网址的转换

    代码实现PHP web服务器下绝对路径到Web网址的转换 代码中用到几个系统变量或常量: 1. 路径中各目录分隔字符 DIRECTORY_SEPARATOR(常量),Windows下DIRECTORY ...

  3. SpringBoot入门教程(四)MyBatis generator 注解方式和xml方式

    MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis 可以使用简单的 XML ...

  4. leetcode — validate-binary-search-tree

    import apple.laf.JRSUIUtils; /** * Source : https://oj.leetcode.com/problems/validate-binary-search- ...

  5. MaxCompute安全管理指南-基础篇

    背景及目的 方便和辅助MaxCompute的project owner或安全管理员进行project的日常安全运维,保障数据安全. MaxCompute有安全模型,DataWorks也有安全模型,当通 ...

  6. 阿里云弹性容器实例产品 ECI ——云原生时代的基础设施

    阿里云弹性容器实例产品 ECI ——云原生时代的基础设施 1. 什么是 ECI 弹性容器实例 ECI (Elastic Container Instance) 是阿里云在云原生时代为用户提供的基础计算 ...

  7. Smobiler 4.0 正式发布

    l Smobiler4.0提供了三大技术亮点:第三方插件.JS.自定义控件等:   强大的插件移动应用引擎 Smobiler支持分插件打包功能和插件扩展机制,让应用开发更加灵活. 分插件打包是指Smo ...

  8. 第一册：lesson109.

    原文: A goof idea question:What does Jane have with her coffee? Shall I make some coffe, Jane? That's ...

  9. [MySQL] mysql 的读写锁与并发控制

    1.无论何时只要有多个查询在同一时刻修改数据,都会产生并发控制的问题 2.讨论mysql在两个层面,服务器层和存储引擎层,如何并发控制读写 3.举了个mbox邮箱文件的例子,说如果有多个进程同时对mb ...

  10. (2)Maven快速入门_2maven在Eclipse中的设置

    1.1 eclipse Maven 设置      [Eclipse Mars之后的版本已经集成了Maven] 1.1.1 eclipse 设置  Maven 下载jar的源码 和 doc 文件  勾 ...