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常见的事件继承 ...
随机推荐
- CentOS7布署.Net Core
本文记录的所有东西,都是吸取别人的经验,自己实践得来,记录下来,也是为了某一天,用上的时候,能够更加的得心应手,平日的学习,都是未雨绸缪之举,但愿,这些笔记,也能帮上正在摸索的你. 第一步,下载虚拟机 ...
- 使用DbTableColumnWeb项目简要
项目说明 环境:Vs2013 .Net4.5 MVC5 主要功能:直观编辑表字段说明:生成表对应的实体类:生成数据库表文档说明: 初衷:在开发过程中,经常会遇到同事询问表字段含义.手动编写表对应的实体 ...
- WireShark 查看UDP码流的丢包率
1.用wireshark抓包之后,右击,点decode as,转化为RTP 2. 点show all streams 3.分析
- easyui-layout系列之布局（1）
1.Layout布局 通过 $.fn.layout.defaults 重写默认的 defaults. 布局(layout)是有五个区域(北区 north.南区 south.东区 east.西区 wes ...
- hdu-5875
题目大意: f(l,r)=a[l] l==r f(l,r)=f(l,r-1)%a[r] l<r 思路: 由此可以推出f(l,r)=a[l]%a[l+1]%a[l+2]%....%a[r] ...
- github本地分支合并到线上主分支
如果是在本地index-swiper分支上,已经写好了那么: 1,git add . //提交到本地缓冲区 2,git commit -m "project init ...
- poj2506 Tiling
http://poj.org/problem?id=2506 题目大意:用多少种方法可以用2*1或2*2瓦片来铺一个2*n的矩形? 这是一个2*17长方形的样品. 输入是一行行的序列,每一行包含一个整 ...
- snmpv3-snmpd.conf解析
1.先指定createUser语句,设置密码和传输密钥. createUser user1 createUser user2 MD5 user2password createUser user3 MD ...
- Android中获取正在运行的服务-------ActivityManager.RunningServiceInfo的使用
关于PackageManager和ActivityManager的使用 ,自己也写了一些DEMO 了,基本上写的线路参考了Settings模块下的 应用程序,大家如果真正的有所兴趣,建议大家看看源码, ...
- iOS 中长按手势回调会被触发过两次
Long-press gestures are continuous. The gesture begins (UIGestureRecognizerStateBegan) when the numb ...