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常见的事件继承 ...
随机推荐
- 执行Docker命令报错解决办法
shim error: docker-runc not installed on system 服务器重启以后,执行docker命令报以上错误,解决办法如下: cd /usr/libexec/do ...
- AndroidPn推送测试
服务器搭建好了之后,往客户端推送.按照里面自带的一个client,可以分别在模拟器和真机上分别测试,不过由于这个框架真的不是很完善,会遇到各种问题. (1) 其中还遇到了一个安卓模拟器的问题,启动模拟 ...
- LeetCode145：Binary Tree Postorder Traversal
题目: Given a binary tree, return the postorder traversal of its nodes' values. For example: Given bin ...
- asp.net MVC把Areas区域绑定成二级域名
先分析需求 在MVC项目中,我们如果有两个Areas.比如Test和DEMO.我们的访问地址应该是 http://localhost:8098/test http://localhost:8098/d ...
- ueditor图片上传插件的使用
在项目里使用到ueditor图片上传插件,以前图片上传都是直接使用js代码直接上传图片,比较麻烦,而且效率也比较低,而ueditor这款插件完美的解决了这个问题,这个是百度开发的一款富文本编辑器,在这 ...
- 解决spring的java.lang.IllegalArgumentException异常
解决办法是: 右击项目 ---> properties --->project facets : 修改JDK版本,需要将1.8 降为1.7版本.
- Flask从入门到精通之大型程序的结构一
尽管在单一脚本中编写小型Web 程序很方便,但这种方法并不能广泛使用.程序变复杂后,使用单个大型源码文件会导致很多问题.不同于大多数其他的Web 框架,Flask 并不强制要求大型项目使用特定的组织方 ...
- jvm高级特性(4)(内存分配回收策略）
JVM高级特性与实践(四):内存分配 与 回收策略 一. 内存分配 和 回收策略 1,对象内存分配的概念: 往大方向讲,它就是在堆上分配(但也可能经过JIT编译后被拆散为标量类型并间接地栈上分配), ...
- selenium IDE的基本命令
waitForText.verifyText和asserText命令 waitForText语句在测试执行时用来判断某些文本是否存在界面中.若界面上显示了指定文本,测试程序会继续执行:若等待一段时间后 ...
- Vim实用技巧系列 - 代码注释
在写代码时候,有时候需要临时注释掉一部分代码,之后还要取消这些注释.真麻烦.那么,用Vim怎么做这件事呢? 第一种方法,块模式. 再次声明,本系列全部以windows下 ...