HTML5--新增拖放事件(7)

前言:

  这节课主要学习HTML5中新增的拖放事件(drag/drop)。

  拖放事件

    1.启用HTML5中,如果想拖拽元素,给元素添加draggable = 'true'的属性,图像和a标签默认是可以进行拖拽的。

    2.拖拽事件:

      1.应用于被拖拽元素 

ondragstart:元素被拖拽开始时触发
ondrag:元素被整个拖拽过程都会触发
ondragend:拖拽结束时触发(鼠标释放)
ondragleave:当鼠标位置离开拖拽元素(范围)时触发

      2.应用于目标元素

ondragenter:被拖拽元素进入目标元素就触发
ondragover:当鼠标拖拽元素(悬浮)在目标元素上触发
ondrop:当鼠标在目标元素中松开被拖拽元素时触发
 注意:
ondrop:浏览器会默认阻止此事件
   解决方法:在ondragover中阻止浏览器的默认行为。e.preventDefault();阻止浏览器的默认行为。
ondragleave:鼠标位置离开目标元素(范围)触发。
3.拖拽事件的通用方法:
   所有的拖拽方法用document调用,用事件对象event中的target属性确定到底是哪个元素对象在调用方法。
4.通过dataTransfer实现数据的存储和获取
e.dataTransfer(format, data);
format:数据的类型:text/html     text/uri-list
Data:数据:一般来说是字符串值。
存储数据的方法:
e.dataTransfer.setData("text/html", e.target.id);
获取数据的方法:
e.dataTransfer.getDate("text/html");
   注意:
通过e.dataTransfer.setData存储的数据只能在drop事件中获取。

    拖放示例

<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}.div1{width: 200px;height: 200px;border: 1px solid red;position: relative;margin-left:20px;float: left;}.div2{width: 200px;height: 200px;border: 1px solid blue;position: relative;margin-left:20px;float: left;}.div3{width: 200px;height: 200px;border: 1px solid green;position: relative;margin-left:20px;float: left;}p{background-color: orange;margin-top: 5px;}</style>
</head>
<body>
<div class="div1" id="div1"><!--在h5中,如果想拖拽元素,就必须为元素添加draggable="true". 图片和超链接默认就可以拖拽--><p id="pe" draggable="true">试着把我拖过去</p><p id="pe1" draggable="true">试着也把我拖过去</p>
</div>
<div class="div2" id="div2"></div>
<div class="div3" id="div3"></div>
<script>var id = null;document.ondragstart=function(e){/*通过事件捕获来获取当前被拖拽的子元素*/e.target.style.opacity=0.5;e.target.parentNode.style.borderWidth="5px";obj= e.target;}document.ondragend=function(e){e.target.style.opacity=1;e.target.parentNode.style.borderWidth="1px";}document.ondragover=function(e){/*如果想触发ondrop事件,那么就必须在这个位置阻止浏览器的默认行为*/e.preventDefault();}document.ondrop=function(e){/*添加元素*/e.target.appendChild(obj);/*通过e.dataTransfer.setData存储的数据,只能在drop事件中获取*/
//        var id=e.dataTransfer.getData("text/html");/*console.log("id="+id);*/
//        e.target.appendChild(document.getElementById(id));
    }
</script>
</body>

 

转载于:https://www.cnblogs.com/diweikang/p/8661575.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367549.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Django 用 uploadify 实现图片批量上传

分享一下在Django中使用uploadify——一个jQuery批量上传插件——的方法。github上的django-uploadify使用的是2.1.4版本&#xff0c;上传button只能使用图片&#xff0c;不能很方便的修改样式。本文针对的是uploadify 3.0.0版本。uploadify可以结合Django自身的ImageField&…

php判断记录,PHP判断数据库中的记录是否存在的方法,php数据库_PHP教程

PHP判断数据库中的记录是否存在的方法&#xff0c;php数据库本文实例讲述了PHP判断数据库中的记录是否存在的方法。分享给大家供大家参考。具体实现代码如下&#xff1a;复制代码 代码如下:$sql"select * from checklist where game_id$gid and task$task and status$stat…

Java DB中的Java存储过程

1 Java存储过程 这篇文章是关于Java DB中的Java存储过程的。 Java DB是基于Java编程语言和SQL的关系数据库管理系统。 这是Apache软件基金会的开源Derby项目的Oracle版本。 Java SE 7 SDK中包含Java DB。 在数据库内调用的Java代码是一个存储过程&#xff08;或多个过程&…

一些职场感想

教训 不要相信领导给你画的大饼 离开了&#xff0c;就不要回去 他说的为你好&#xff0c;都是套路而已 你会比你想象的更优秀 不要认为提增加工资不好意思&#xff0c;你不提&#xff0c;他永远不会给你加工资 怎么才算努力 这就看你所处的队友是怎么样的&#xff1b;如果队友是…

php聊天室发送表情,聊天室技术(六)-- 表情和动作_PHP

表情和动作极大的丰富了聊天的乐趣,一般的聊天室主要通过2种方法发送(1) 按钮菜单的方法通过在一个固定的下拉菜单里面进行选择,找到自己满意的表情,然后选中,按发送按钮发出(2) 通过手工输入代号比如网易的以手工输入 //hello 代表欢迎的一段动作,以 //bye 代表再见的一段动作…

Java 8的新增功能(第I部分-JavaFX)

免责声明&#xff1a;我不为Oracle工作&#xff0c;也不以任何方式代表Oracle。 此功能列表不是官方的。 作为“局外人”&#xff0c;这只是我研究的一部分。 Java 8已在大约两个月前完成功能&#xff0c;并且开发者预览版即将来临&#xff08;两周后&#xff09;。 这篇博客文…

mysql数据库sql语句优化

昨天帮同事优化了一个sql语句发出来共勉下: SELECT T.*, ( SELECT S.codeName FROM sys_codelist S WHERE S.codeValue T.packagingtype AND S.kindCode PACKAGING ) AS packagingtypeName, S.codeName AS codename, ( SELECT picpath FROM zl_b_gd_pic WHERE 1 1 AND gdid …

CopyPropertis

commons-beanutils.jar PropertyUtils.copyProperties(Object dest, Object orig) spring-beans.jar BeanUtils.copyProperties(Object source, Object target)CopyPropertis对List的操作需要手动转载于:https://www.cnblogs.com/xingzc/p/8663119.html

java调用外联服务用xml,Spring IOC 依赖注入的两种方式:XML和注解

IoC&#xff0c;直观地讲&#xff0c;就是容器控制程序之间的关系&#xff0c;而非传统实现中&#xff0c;由程序代码直接操控。这也就是所谓“控制反转”的概念所在。控制权由应用代码中转到了外部容器&#xff0c;控制权的转移是所谓反转。IoC还有另外一个名字——“依赖注入…

Wicket模型的干净方法

Apache Wicket Web框架的核心概念之一是模型和IModel作为其编程接口。 Wicket组件严重依赖模型&#xff0c;这使它们成为体系结构的重要组成部分。 Apache Wicket是一个有状态框架&#xff0c;将页面及其组件存储到通常位于HTTP会话中的页面存储中。 组件根据模型的内容创建面向…

jquery选择器大全

jQuery 选择器大全选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id"lastname" 的元素 .class $(".intro") 所有 class"intro" 的元素 element $("p") 所有 <p> 元素 .class.class $(".intr…

第7章 输入/输出系统

总览 I/O系统基本概念 外部设备 输入设备&#xff1a;键盘、鼠标 输出设备&#xff1a;显示器、打印机 外存储器&#xff1a;硬盘存储器、磁盘阵列、光盘存储器 I/O接口 I/O接口的功能和基本结构 I/O端口及其编址 I/O方式 程序查询方式 程序中断方式 中断的基本概念&#xff0c…

python第一个程序HelloWorld

在写第一个python程序之前&#xff0c;我们还需要了解的一个东西就是python解释器 解释器&#xff0c;顾名思义&#xff0c;就是解释一段代码的机器&#xff0c;程序运行的平台&#xff0c;例如Java的解释器就是jdk。 我们在写好的python代码&#xff0c;需要在解释器上执行&am…

Java字符串的十大问题

以下是有关Java字符串的十大常见问题 。 1.如何比较字符串&#xff1f; 使用“ ”还是使用equals&#xff08;&#xff09;&#xff1f; 简而言之&#xff0c;“ ”测试引用是否相等&#xff0c;而equals&#xff08;&#xff09;测试值是否相等。 除非您要检查两个字符串是否…

php原生sql语法,thinkphp执行原生SQL语句的实现方法

怎样在thinkphp里面执行原生的sql语句&#xff1f;$Model new Model();//或者 $Model D(); 或者 $Model M();$sql "select * from order";$voList $Model->query($sql);只是需要new一个空的模型继承Model中的方法。注意query是查功能&#xff0c;execute是增…

Jquery中如何获取元素的文本,值,属性和内容

jQuery DOM 操作jQuery 中非常重要的部分&#xff0c;就是操作 DOM 的能力。jQuery 提供一系列与 DOM 相关的方法&#xff0c;这使访问和操作元素和属性变得很容易。提示&#xff1a;DOM Document Object Model&#xff08;文档对象模型&#xff09;DOM 定义访问 HTML 和 XML …

Python中的__new__()方法的使用

__new__() 函数只能用于从object继承的新式类。 先看下object类中对__new__()方法的定义&#xff1a; class object:staticmethod # known case of __new__def __new__(cls, *more): # known special case of object.__new__""" T.__new__(S, ...) -> a new …

什么是消息中间件

面向消息的中间件&#xff1a;Message-oriented Middleware, MOM 基本功能&#xff1a; 将信息以消息的形式&#xff0c;从一个应用程序传送到另一个或多个应用程序 主要特点&#xff1a; 消息异步接受&#xff0c;类似手机短信的行为&#xff0c;消息发送者不需要等待消息接受…

用Java分割大型XML文件

上周&#xff0c;我被要求用Java编写一些东西&#xff0c;该东西能够将单个30GB XML文件拆分为可配置文件大小的较小部分。 该文件的使用者将是一个中间件应用程序&#xff0c;该应用程序存在XML较大的问题。 在后台&#xff0c;它使用某种DOM解析技术&#xff0c;使它在一段时…

am82.top 1.php,Droppy v2.1.3 – PHP在线网盘系统

更新跨度比较大从1.4.6-2.1.3的更新日志我都贴出来利V2.1.9 (10 July, 2019)- Added option to define maximum upload chunk size in the admin panel- Fixed an issue where downloads were corruptedV2.1.8 (10 July, 2019)- Fixed an issue where upload password field wa…