学习网站：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. AndroidStudio运行java的main方法

    新建一个java文件,含有main方法 package com.why.project.androidcnblogsdemo.utils; /** * Created by HaiyuKing * U ...

  2. SpringCloud Config服务端

    1.导入依赖 <dependency> <groupId>org.springframework.cloud</groupId> <artifactId> ...

  3. 设计模式总结篇系列：桥接模式（Bridge）

    在实际类设计过程中,有时会遇到此类情况:由于实际的需要,某个类具有两个或两个以上的维度变化,如果利用继承将每种可能的变化情况都定义成一个类,一是会导致类膨胀的问题,二是以后不太好维护和并且违背类的设计 ...

  4. 在.NET Core中使用简单的插件化机制

    前言 插件化,其实也并不是什么新东西了,像nopCommerce等开源项目都有类似的机制,而且功能比较完善和齐全. 相信大家都对接过不少支付方式,支付宝.微信以及各大银行或第三方的支付公司. 我们可以 ...

  5. Python3+Selenium2完整的自动化测试实现之旅（六）：Python单元测试模块Unittest运用

    一.Unittest单元测试框架简介 Unitest是Python下的一个单元测试模块,是Python标准库模块之一,安装完Python后就可以直接import该模块,能在单元测试下编写具体的测试用例 ...

  6. 服务器端配置nodejs环境(使用pm2进程管理运行)

    一.brew安装: 由于Mac没有装ubantu,所以不能用apt-get命令,在本地命令行下Mac安装homebrew替代:  https://brew.sh 二.新开命令窗口,登录root用户,安 ...

  7. Oracle 11g设置IP访问限制

    出于数据安全考虑,对Oracle数据库的IP做一些限制,只有固定的IP才能访问. 修改$ORACLE_HOME/network/ADMIN/sqlnet.ora文件 增加以下内容(红色表示注释): # ...

  8. 【开源】SpringBoot&Netty实现仿微信网页版项目更新

    阅读本文约“2.3分钟” 项目更新啦!V1.3.0 还记得那个聊天室的小项目吗? SpringBoot 加 Netty 实现聊天室 没错,这次已经完整进行了版本的替换,酥酥聊天室! 基于原项目的改动, ...

  9. TensorFlow与Flask结合识别手写体数字

    阅读本文约“2.2分钟” TensorFlow框架 ——TensorFlow是谷歌基于DistBelief进行研发的第二代人工智能学习系统 ——可被用于语音识别或图像识别等多项机器学习和深度学习领域 ...

  10. BaseServlet的编写

    在BaseServlet之前,需要提及工厂factory去管理dao以及service,以及页面转发或重定向的管理 1.创建一个工厂类,以及一个资源文件,资源文件中以键值对的形式去存储key,以及对应 ...