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常见的事件继承 ...
随机推荐
- Win(Phone)10开发第(7)弹，Extended Execution
众所周知,在WindowsPhone8中,app在转入后台并且没有挂起的这段时间是可以继续运行的,此时可以继续执行程序的操作,这个功能在位置追踪app中时很有用的,当接电话来短信或者锁屏后不影响程序运 ...
- VC++开发Windows系统全局钩子
本文的大部分内容属于对一篇网文的实践与练习,同时参考的还有一本书,在此向网文与书的作者表示敬意. 这个程序是一个windows系统键盘监控程序,随着开机自动启动,可以监控系统中各用户的键盘,并将按键记 ...
- 2017 NAIPC A:Pieces of Parentheses
my team solve the problem in the contest with similar ideathis is a more deep analysis The main idea ...
- iOS Block初探
//https://www.jianshu.com/p/d28a5633b963 #import <Foundation/Foundation.h> void (^FFGlobalBloc ...
- UIVisualEffectView(高斯模糊效果)
///高斯模糊. UIView *tempView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)]; tempView. ...
- node 无脑生成小程序二维码图
RT 新建createwxaqrcode.js: const request = require('request') const fs = require('fs') // eg:生成购物车列表圆形 ...
- SSH版最大会话连接数
在登录方法中加入如下两行语句,作为程序的入口: SessionListener.isAlreadyEnter(getHttpRequest().getSession(),this.getUserCod ...
- 关于防止表单form重复提交的方式
表单重复提交: 1.第一种:添加以后刷新页面(刷新的是Servlet) 2.第二种:重复点击提交按钮. * 使用令牌机制:(防止表单重复提交) * 在表单页面中 生成一个令牌 * 将这个令牌保存在se ...
- AT24Cxx学习笔记
AT24Cxx是E2PRom的一个系列: 存储空间大小:AT24C02——2Kbit(256Bytes).AT24C04——4Kbit(512Bytes).AT24C08——8Kbit(1024Byt ...
- Spring Boot 项目发布到 Tomcat 服务器
第 1 步:将这个 Spring Boot 项目的打包方式设置为 war.<packaging>war</packaging> SpringBoot 默认有内嵌的 tomcat ...