HTML5的拖放事件
1、给标签添加属性draggable=ture即可允许拖放，有些标签可以不加，例如img有图片、a有url，默认拥有拖放功能
2、事件在被拖动元素上触发
- ondragstart
- ondrag
- ondragend
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>
解释在代码中，拖动事件
</title>
<style>
.dragFrame{
width:200px;
height:200px;
background-color:black;
}
</style>
</head>
<body> <div class="dragFrame" draggable="true"></div>
<script>
//ondragstart 元素被拖动，事件触发
document.addEventListener("dragstart",function(e){
if(e.target.className=="dragFrame"){
e.target.style.opacity=.4;
}
});
//ondrag 元素已经在拖动过程中，只要还在拖动，事件就不断得触发
document.addEventListener("drag",function(){
console.log("音乐：要我看多少遍 你停下来就说明你放了手");
});
//ondragend 容易看出元素结束拖动，事件触发
document.addEventListener("dragend",function(e){
if(e.target.className=="dragFrame"){
e.target.style=1;
}
});
</script>
</body>
</html>
3、被拖动元素进入目标元素
- ondragenter
- ondragover
- ondragleave
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>
解释在代码中，拖动事件
</title>
<style>
.dragFrame{
width:200px;
height:200px;
border:1px solid black;
}
</style>
</head>
<body> <div class="dragFrame"><p id="moveFrame" draggable="true">我想走了</p></div>
<div class="dragFrame"></div>
<script>
//ondragstart 元素被拖动，事件触发
document.addEventListener("dragstart",function(e){
if(e.target.className=="dragFrame"){
e.target.style.opacity=.4;
}
});
//ondrag 元素已经在拖动过程中，只要还在拖动，事件就不断得触发
document.addEventListener("drag",function(){
console.log("音乐：要我看多少遍 你停下来就说明你放了手");
});
//ondragend 容易看出元素结束拖动，事件触发
document.addEventListener("dragend",function(e){
if(e.target.className=="dragFrame"){
e.target.style=1;
}
}); //ondragenter 被拖动元素一旦进入目标元素，事件触发
document.addEventListener("dragenter",function(e){
e.target.style.outline="3px dotted red";
});
//ondragover 被拖动元素在目标元素上随时拖放，事件不断触发
document.addEventListener("dragover",function(){
console.log("音乐：你来看我了 我疯狂的激动");
});
//ondragleave 被拖动元素离开了目标元素上面，事件触发
document.addEventListener("dragleave",function(e){
e.target.style.outline="";
});
</script>
</body>
</html>
4、drop 拖动中，释放鼠标键，事件触发（注意，在ondragover事件里要添加preventDefault的方法阻止默认行为，drop事件就可以看见效果）
没有阻止默认行为的效果是：
drop就毫无反应，跟没加过的一样
阻止了默认行为后
drop就有了效果
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>
解释在代码中，拖动事件
</title>
<style>
.dragFrame{
width:200px;
height:200px;
border:1px solid black;
}
</style>
</head>
<body> <div class="dragFrame"><p id="moveFrame" draggable="true">我想走了</p></div>
<div class="dragFrame"></div>
<script>
//ondragstart 元素被拖动，事件触发
document.addEventListener("dragstart",function(e){
if(e.target.className=="dragFrame"){
e.target.style.opacity=.4;
}
});
//ondrag 元素已经在拖动过程中，只要还在拖动，事件就不断得触发
document.addEventListener("drag",function(){
console.log("音乐：要我看多少遍 你停下来就说明你放了手");
});
//ondragend 容易看出元素结束拖动，事件触发
document.addEventListener("dragend",function(e){
if(e.target.className=="dragFrame"){
e.target.style=1;
}
}); //ondragenter 被拖动元素一旦进入目标元素，事件触发
document.addEventListener("dragenter",function(e){
e.target.style.outline="3px dotted red";
});
//ondragover 被拖动元素在目标元素上随时拖放，事件不断触发
document.addEventListener("dragover",function(e){
e.preventDefault();
console.log("音乐：你来看我了 我疯狂的激动");
});
//ondragleave 被拖动元素离开了目标元素上面，事件触发
document.addEventListener("dragleave",function(e){
e.target.style.outline="";
});
document.addEventListener("drop",function(e){
e.preventDefault();
alert("drop有效果了");
})
</script>
</body>
</html>
5、兼容性
HTML5的拖放事件的更多相关文章
- HTML5拖放事件（Drag-and-Drop,DnD）
拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 拖放是在“拖放源(drag source)”和“拖放目标(drop target ...
- HTML5拖放事件-上传图片预览功能
主要用到的知识点有dataTransfer对象和FileReader(读取文件信息) 1.创建简单的HTML标签: <body> <div id="box"> ...
- HTML5 — 让拖放变的流行起来
先上 Demo,尽量用 chrome,代码可参考 Github. 在 HTML5 出现之前,页面元素的拖放需要监听 mousedown.mouseover 以及 mouseup 等一系列事件,然后改变 ...
- HTML5原生拖放实例分析
HTML5提供了原生拖放功能的JavaScript API,使用起来很方便. 兼容性: 对于PC端浏览器,Firefox.Chrome.Safari支持良好,而IE和Edge浏览器有些特性不支持,如I ...
- HTML5 原生拖放
前言: HTML5提供专门的拖拽与拖放的API,可以方便的指定某个元素可拖动,可以创建自定义的可拖动元素和放置目标 相关知识点: 1.拖放事件 拖放元素时,将依次触发下列事件 dragstart 按 ...
- H5案例分享：html5重力感应事件
html5重力感应事件 一.手机重力感应图形分析 1.设备围绕z轴的旋转角度为α,α角度的取值范围在[0,360). 设备在初始位置,与地球(XYZ)和身体(XYZ)某个位置对齐. 设备围绕z轴的旋转 ...
- Android事件详解——拖放事件DragEvent
1.Android拖放框架的作用? 利用Android的拖放框架,可以让用户用拖放手势把一个View中的数据移到当前layout内的另一个View中去. 2.拖放框架的内容? 1)拖放事件类 2)拖放 ...
- H5 拖放事件详解
拖放事件 H5的拖放事件提供了多个接口: 1.drag:当元素或者选中的文本被拖动时触发(每几百毫秒触发一次),应用在被拖拽元素上 2.dragend:当拖动操作结束时触发(通过释放鼠标按钮或者点击转 ...
- 17.QT-事件处理分析、事件过滤器、拖放事件
Qt事件处理介绍 Qt平台会将系统产生的消息转换为Qt事件 Qt事件是一个QEvent的对象 Qt事件用来描述程序内部或外部发生的动作 任意的QObject对象都具备事件处理的能力 Qt常见的事件继承 ...
随机推荐
- fleet中service之间的依赖关系
最近有人在topcoder上提出使用fleet在集群上部署service时有时候会发现,当启动依赖于整个集群服务的service时,只会检查那个service所在机器的依赖关系,这样就会造成一些问题, ...
- IIS 绑定 HTTPS 域名
HTTPS为SSL安全通道,虽然并不清楚具体有什么用,但至少网站看上去比HTTP上档次,访问速度也没什么影响,所以有条件的话,还是做下,可以做噱头忽悠人. WIN2008系统 因为端口443冲突,只能 ...
- Windows10 家庭版添加【本地组策略编辑器】
Windows10 家庭版默认没有[本地组策略编辑器],添加方法: 新建记事本复制以下内容 @echo off pushd "%~dp0" dir /b C:\Windows\se ...
- python 以行为单位进行字符串的切割
可以使用str 的 splitlines() 方法 实现以行为单位 进行字符串的切割, keepends=False 不保留\n符号, kendends=True 保留\n符号 my_str = &q ...
- Python(文件上传)
day26 通过socket上传文件. post_client.py import socket import os sk = socket.socket() print(sk) address = ...
- 聊聊并发（三）Java线程池的分析和使用
1. 引言 合理利用线程池能够带来三个好处.第一:降低资源消耗.通过重复利用已创建的线程降低线程创建和销毁造成的消耗.第二:提高响应速度.当任务到达时,任务可以不需要的等到线程创建就能立即执行. ...
- java保留小数点两位的4种方法
import java.math.BigDecimal; import java.text.DecimalFormat; import java.text.NumberFormat; public c ...
- nodejs实现请求代理
通常我们常用的请求方法只有GET.POST.PUT和DELETE,所以在此只介绍这四种和文件上传的代理方式 在此我们使用request.js第三方模块实现 GET(DELETE同GET,将reques ...
- centos7硬盘分区
首先在虚拟机的设置中为系统添加硬盘 使用fdisk -l /dev/sdb 查看未分区的硬盘 fdisk -l /dev/sda 这是已经分区好得 接下来我们就要对sdb进行分区: 首先使用fd ...
- D04——C语言基础学PYTHON
C语言基础学习PYTHON——基础学习D04 20180810内容纲要: 1 内置函数 2 装饰器 3 生成器 4 迭代器 5 软件目录结构规范 6 小结 1 内置函数 内置函数方法详 ...