学习网站：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. Android--Tween补间动画

    前言 Android除了支持逐帧动画之外,也提供了对补间动画的支持,补间动画就是指开发人员只需要指定动画的开始.动画结束的"关键帧",而动画变化的"中间帧"由系 ...

  2. 从锅炉工到AI专家(8)

    ImageNet 基础部分完成,从本篇开始,会略微的增加一些难度. 通常说,在解决问题的时候,大多程序员都会在网上搜索,寻找一些相似相近的案例作为参考.这个方式在机器学习领域同样有效.可惜早期的时候, ...

  3. kNN算法：K最近邻(kNN，k-NearestNeighbor)分类算法

    一.KNN算法概述 邻近算法,或者说K最近邻(kNN,k-NearestNeighbor)分类算法是数据挖掘分类技术中最简单的方法之一.所谓K最近邻,就是k个最近的邻居的意思,说的是每个样本都可以用它 ...

  4. centos7 修改yum源为阿里源

    centos7 修改yum源为阿里源,某下网络下速度比较快 首先是到yum源设置文件夹里 安装base reop源 cd /etc/yum.repos.d 接着备份旧的配置文件 sudo mv Cen ...

  5. springboot情操陶冶-web配置(七)

    参数校验通常是OpenApi必做的操作,其会对不合法的输入做统一的校验以防止恶意的请求.本文则对参数校验这方面作下简单的分析 spring.factories 读者应该对此文件加以深刻的印象,很多sp ...

  6. 痞子衡嵌入式：第一本Git命令教程（7.1）- 清理之缓存(stash)

    今天是Git系列课程第七课,上一课我们学会了查看Git本地历史提交,今天痞子衡要讲的是Git仓库的清理操作,一共4个命令,都是日常开发中非常实用的命令,掌握这4个命令,会让你有一种玩弄Git仓库于股掌 ...

  7. [UOJ310] 黎明前的巧克力

    Sol 某比赛搬了这题. 首先选择两个不交非空子集且异或和为0的方案数,等价于选择一个异或和为0的集合,并把它分成两部分的方案数. 这显然可以DP来算,设 \(f[i][j]\) 表示前\(i\)个数 ...

  8. [Code+#3] 寻找车位

    Description 给定一个大小为 \(n\times m\) 的 \(01\) 矩阵. 要求支持:单点翻转,询问子矩形内部最大正方形. \(n\times m\leq 4\cdot 10^6,n ...

  9. babel版本兼容报错处理：Plugin/Preset files are not allowed to export objects

    原文地址: https://www.cnblogs.com/jiebba/p/9618930.html 1.为什么会报错 ? 这里抱着错误是因为 babel 的版本冲突. 多是因为你的 babel 依 ...

  10. .net 用ajaxFileUpload 上传超过20M文件设置

    1.在web.config的 <system.web>  节点里面添加   <httpRuntime targetFramework="4.5.2"  execu ...