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:/ ...
随机推荐
- redis 集群目标、集群查看、配置方法及过程、哨兵配置启动
集群目标 主从复制,读写分离:故障切换(通过哨兵实现) 查看集群状态 info replication 配置方法 只设置从数据库就可以了:最佳实践,在主数据库配置masterauth <mast ...
- zabbix系列之八——安装后配置三Triggers
1Triggers(触发器) 描述 详细 备注 术语描述 1)触发器是评估监控项采集的数据的逻辑表达式,代表了当前系统状态. 2)触发器可定义一个什么数据是可接受的阈值,因此,如果接收的数据超过了可接 ...
- 在centos系统安装mongodb
在Linux CentOS系统上安装完php和MySQL后,为了使用方便,需要将php和mysql命令加到系统命令中,如果在没有添加到环境变量之前,执行“php -v”命令查看当前php版本信息时时, ...
- 由于使用JDBC ResultSet的滚动功能而导致的内存溢出
前天一去公司,老大说,服务器全挂了! 最后排查了半天,结论是内存溢出! 在WAS的DUMP日志中,看得我头晕眼花,终于找到了罪魁祸首,原来是有同事写代码的时候使用了可滚动的结果集导致内存溢出. 什么是 ...
- WDS使用捕获映像制作企业自定义映像
来源:http://www.07net01.com/linux/WDSshiyongbuhuoyingxiangzhizuoqiyezidingyiyingxiang_545749_137448761 ...
- Linux系统设置运行级别
设置运行级别 查看开机加载级别:7个级别 规范场景默认都是3 cat /etc/inittab --> 系统开机启动加载的文件,可以设置运行级别 # Default runlev ...
- CSS背景图片垂直居中center不起效果完美解决
背景图片居中CSS如下 background:#4892fe url("<%=basePath%>/img/login_bg.jpg") no-repeat cente ...
- 铁乐学Python_day12_装饰器
[函数的有用信息] 例: def login(user, pwd): ''' 功能:登录调用 参数:分别有user和pwd,作用分别是用户和密码: return: 返回值是登录成功与否(True,Fa ...
- 剑指offer 10矩形覆盖
我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形.请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法 java版本: public class Solution { publ ...
- ZT 链表逆序
链表逆序 原帖地址http://blog.csdn.net/niuer09/article/details/5961004 分类: C/C++2010-10-23 17:23 18425人阅读 评论( ...