HTML5 drag & drop 拖拽与拖放
关键词：
1. draggable：规定元素是否可拖动的，draggable=true可拖动
2. dataTransfer：拖拽对象用来传递的媒介，使用方式：event.dataTransfer
3. ondragstart：拖拽元素被拖拽时触发的事件，作用于被拖拽元素
4. ondragenter：拖拽元素进入目标元素时触发的事件，作用于目标元素
5. ondragover：拖拽元素在目标元素移动触发的事件，作用于目标元素
6. ondrop：拖拽的元素在目标元素上同时鼠标放开触发的事件，作用于目标元素上
7. ondragend：拖拽完成后触发的事件，作用于被拖拽元素上
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style type="text/css">
#rectangle {width:350px;height:70px;padding:10px;border:1px solid #000;}
</style>
</head>
<body> <div id="rectangle"></div>
<p id="word" draggable="true">这是一段可移动的段落，请把该段落拖入上面的矩形进行测试</p>
<script type="text/javascript">
let rectangle = document.getElementById('rectangle'),
word = document.getElementById('word'); word.ondragstart = (e) => {
e.dataTransfer.setData("Text",e.target.id);
}; rectangle.ondragenter = (e) => {
word.style.color = '#e1453c';
};
//ev.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。
另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。
此时需要用用document的ondragover事件把它直接干掉。
rectangle.ondragover = (e) => {
e.preventDefault();
};
rectangle.ondrop = (e) => {
let data=e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
e.preventDefault();
};
word.ondragend = (e) => {
document.getElementById('word').style.color = '#3cf078';
};
</script>
</body>
</html>
HTML5 drag & drop 拖拽与拖放的更多相关文章
- HTML5 drag & drop 拖拽与拖放简介
DataTransfer 对象:退拽对象用来传递的媒介,使用一般为Event.dataTransfer. draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如 ...
- atitit.D&D drag&drop拖拽文件到界面功能 html5 web 跟个java swing c#.net c++ 的总结
atitit.D&D drag&drop拖拽文件到界面功能 html5 web 跟个java swing c#.net c++ 的总结 1. DND的操作流程 1 2. Html5 注 ...
- Atitit。D&D drag&drop拖拽功能c#.net java swing的对比与实现总结
Atitit.D&D drag&drop拖拽功能c#.net java swing的对比与实现总结 1. 实现一个D&D操作一般包括三个步骤: 1 2. .net黑头的拖曳机制 ...
- HTML5中的拖拽与拖放(drag&&drop)
1.drag 当拖动某个元素时,将会依次触发下列事件: 1)dragstart:按下鼠标键并开始移动鼠标时,会触发该事件 2)drag:dragstart触发后,随即便触发drag事件,而且在元素被拖 ...
- html5 drag 文件拖拽浅淡
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)
人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...
- html5 Sortable.js 拖拽排序源码分析
最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 本帖属于原创,转载请出名出处. 官网http:// ...
- HTML5多图片拖拽上传带进度条
前言 昨天利用css2的clip属性实现了网页进度条觉得还不错,但是很多情况下,我们在那些时候用进度条呢,一般网页加载的时候如果有需要可以用,那么问题就来了,怎么才算整个加载完毕呢,是页面主要模块加载 ...
- HTML5 drag & drop & H5 DnD
HTML5 drag & drop H5 DnD https://html5demos.com/ demos https://html5demos.com/dnd-upload https:/ ...
随机推荐
- Java 之常用API（二）
Object类 & System类 日期相关类 包装类 & 正则表达式 Object类 & System类 1.1 Object类 1.1.1 概述 Object类是Java语 ...
- Android深入理解Context（二）Activity和Service的Context创建过程
前言 上一篇文章我们学习了Context关联类和Application Context的创建过程,这一篇我们接着来学习Activity和Service的Context创建过程.需要注意的是,本篇的知识 ...
- maven 远程仓库、私服及镜像配置
maven仓库分类 本地仓库.远程仓库.远程仓库又有私服.中央仓库.其它公共库.中央仓库是maven自带的核心仓库. 仓库配置远程仓库可以配置多个,超级pom中定义的中央仓库 <reposito ...
- SSL Certificates深入理解
http://www.littlewhitedog.com/content-71.html https://www.verisign.com/en_US/website-presence/websit ...
- Redis搜索引擎设计
以下图片是基于自身对知识掌握的基本能力而画出的,并没有系统全面的读过活跃于互联网大牛的著作(个人认为那样会限制自身的思维空间),因此,若图片里存在错误,敬请批评指正,谢谢! 除非互联网项目,传统的制造 ...
- Oracle GoldenGate DDL 详细说明 使用手册(较早资料)
一. 概述 DDL 相关的参数包括:DDL.DDLERROR.DDLOPTIONS.DDLSUBST.DDLTABLE.GGSCHEMA. PURGEDDLHISTORY.PURGEMARKERHIS ...
- Linux Transparent Huge Pages 对 Oracle 的影响
1 Transparent Huge Pages 说明 官网上有2篇文章对THP 做了说明: https://access.redhat.com/solutions/46111 https://acc ...
- Linux blkid命令详解
blkid命令对查询设备上所采用文件系统类型进行查询.blkid主要用来对系统的块设备(包括交换分区)所使用的文件系统类型.LABEL.UUID等信息进行查询.要使用这个命令必须安装e2fsprogs ...
- 如何避免HBase写入过快引起的各种问题
首先我们简单回顾下整个写入流程 client api ==> RPC ==> server IPC ==> RPC queue ==> RPC handler ==> w ...
- IP地址分类和网段区分的知识
IP地址分类/IP地址10开头和172开头和192开头的区别/判断是否同一网段 简单来说在公司或企业内部看到的就基本都是内网IP,ABC三类IP地址里的常见IP段. 每个IP地址都包含两部分,即网络号 ...