学习网站：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. 四则运算4（Android版）

    队员:王楗  http://home.cnblogs.com/u/wangjianly/ 结组照:

  2. AngularJS7那些不得不说的事故

    题外话   最近简直要忙死,所以停更了很久,你们会不会以为我人间蒸发了?   正文之前,请允许我先跑个题,就是关于忙的问题.   做了Freelance,每天过的比上班还累,这完全不是我想要的生活啊? ...

  3. ArrayList循环遍历并删除元素的常见陷阱

    在工作和学习中,经常碰到删除ArrayList里面的某个元素,看似一个很简单的问题,却很容易出bug.不妨把这个问题当做一道面试题目,我想一定能难道不少的人.今天就给大家说一下在ArrayList循环 ...

  4. ELK-Elasticsearch安装

    1.安装JDK必须安装JDK并且要求版本至少是1.8以上包含1.8的版本. 2.创建 es 用户这里需要注意的是,es 规定 root 用户不能启动 es,所以需要创建一个用户来启动 es # 创建用 ...

  5. jaeger 使用初探

    导读:有一天我们接到这样一条客诉“你们的收银软件最近特别慢,严重影响我们的收银效率,再不解决我们就不用了”,我相信大家应该都遇到过这种问题,即使现在没遇到,将来一定会遇到的,那遇到了怎么办呢?就这个话 ...

  6. leetcode — remove-duplicates-from-sorted-list

    /** * Source : https://oj.leetcode.com/problems/remove-duplicates-from-sorted-list/ * * * Given a so ...

  7. python基础5--输入输出、错误与异常

    1.键盘输入输出 输入:input()和raw_input() 输出:str()和format raw_input([prompt]) 函数从标准输入读取一个行,并返回一个字符串(去掉结尾的换行符): ...

  8. C#反射与特性使用简介

    本文是学习特性与反射的学习笔记,在介绍完特性和反射之后,会使用特性与反射实现一个简单的将DataTable转换为List的功能,水平有限,如有错误,还请大神不吝赐教. 1.      反射:什么是反射 ...

  9. [PHP] strpos stripos strrpos strripos的区别

    stripos — 查找字符串首次出现的位置(不区分大小写),应使用 === 运算符来测试此函数的返回值 strpos 左边开始字符出现的第一个位置,区分大小写stripos 和上面一样,不区分大小写 ...

  10. php 时间戳最大值

    今天遇到一个bug,获取有效期值错误,在定位跟踪后发现有效期有值,如下: $expireDate = ; //2037-08-16 09:30:48 但是在该时间戳的基础上加上1 year后, $ex ...