H5系列之drag拖放
H5中， 有个属性，draggable="true"， 这个属性呢(默认false)，需要加在标签上，加上去该标签就可以拖动了， 看下gif图吧
默认的标签，是不能拖动的，但是有两个标签是意外，img标签，和 a标签，默认就可以拖动。
浏览器兼容问题： w3c 是说 都支持， 但是据我实测， firefox 浏览器，在我这台机子上面是不支持的。 所以，使用的时候，注意一下，firefox 这个特殊的浏览器
好了，接下来，看看他还有些什么东西吧。拖拽div的时候，他身上能监听到三个事件 ↓
<script>
var div = document.getElementsByTagName('div')[0]; div.ondragstart = function(e){ //开始拖拽事件
console.log('start');
} div.ondrag = function(e){ //拖拽过程中的事件
console.log('drag');
} div.ondragend = function(e){ //结束拖拽事件
console.log('end');
}
</script>
如果有仔细看的朋友，就会观察到， dragstart事件，并不是在点击的时候触发的，是点击之后，开始移动的时候触发的，还有，drag事件呢， 只要在触发了 dragstart 事件后，移动了，那么，他就会不停的触发，即使你已经停止移动了，还是会触发，直到你放下鼠标按键，触发了 dragend事件后，才停止。
简单可以理解为，drag 事件呢， 就是在移动的过程中会一直触发。
那么。做一个简单的拖拽小demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div draggable="true"></div>
<script>
var div = document.getElementsByTagName('div')[0];
var X = 0,
Y = 0;
div.ondragstart = function(e){
X = e.clientX; //记录鼠标点下的位置。(因为div的定位点，是左上角 0，0)
Y = e.clientY;
}
div.ondragend = function(e){
var X1 = e.clientX - X; //结束的位置，减去鼠标点下的位置，那么得到的位置，就是div落下的位置。
var Y1 = e.clientY - Y;
div.style.left = div.offsetLeft + X1 + 'px'; //这里还需要加上 div当前的位置， 累加。
div.style.top = div.offsetTop + Y1 + 'px';
}
</script>
</body>
</html>
你以为这样就结束了吗？
还有四个事件，分别是 ondragenter, ondragover, ondragleave, ondrop, 这四个事件呢，是绑定到，你要把拖拽的东西，放到那里去。 举个例子，我要拿一个杯子，那么我要把这个杯子放到哪里去呢？ 是不是得有个东西，给他放？ 那么这四个事件，就是绑定在，给他放的标签上。 看gif 图吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div:nth-of-type(1){
width: 100px;
height: 100px;
background-color: red;
}
.box{
position: absolute;
left: 200px;
top: 200px;
width: 200px;
height: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<div draggable="true"></div>
<div class="box"></div>
<script>
var box = document.getElementsByClassName('box')[0];
box.ondragenter = function(){
console.log('enter'); // 跟 dragstart 事件一样， 只不过，是进入到该标签内才会触发(不是东西进入就触发，还得是鼠标进去)。
}
box.ondragover = function(){ // 跟 drag 事件一样， 只不过，是进入到该标签内才会触发。
console.log('over');
}
box.ondragleave = function(){ // 是进入到该标签内,在离开该标签才会触发。(鼠标抬起，物体会回到原来的位置上，此时也会触发leave事件，因为已经离开了)
console.log('leave');
}
box.ondrop = function(){
console.log('drop'); // 跟 dragend 事件一样， 只不过，是进入到该标签内,在该标签内放置标签才会触发。在该标签外面放置是不会触发的
}
</script>
</body>
</html>
看完上面gif图的 有没有发现， 前三个事件都触发了， 为啥第四个事件，drop 不会触发呢？ 为什么在黑框里面放置红方块不会触发，在外面放置也不会触发？
这是因为，无论你在哪里放置 这个红方块。 都是不允许的，在外面放(body)，里面放(box)，需要添加一个阻止默认事件才可以。在ondragover 里面添加即可
box.ondragover = function(e){
e.preventDefault();
}
接下来，做一个小demo， 拖拽，放置到框框里面,上效果图
代码如下：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
} .box {
width: 200px;
height: 50px;
background-color: #0ff;
margin-top: 10px;
} .wra {
position: absolute;
left: 300px;
top: 0;
width: 200px;
height: auto;
border: 1px solid black;
} .wra:nth-of-type(1){
left: 0;
top: 0;
}
</style>
</head> <body>
<div class="wra" >
<div class="box" draggable="true">1</div>
<div class="box" draggable="true">2</div>
<div class="box" draggable="true">3</div>
</div> <div class="wra"></div>
<script>
var wra = document.getElementsByClassName('wra')[1];
var box = document.getElementsByClassName('box');
var dom = null;
for (var i = 0; i < box.length; i++) { //给每个块 添加开始拖拽的事件。
box[i].ondragstart = function () {
dom = this; //谁触发了这个事件，就把它添加到 dom变量上。
}
} wra.ondragover = function (e) {
e.preventDefault();
}
wra.ondrop = function () {
this.appendChild(dom); // 在触发放置事件后，把dom变量上面存dom元素，添加到 wra里面去。
}
</script>
</body> </html>
本章结束，感谢你的阅读。
H5系列之drag拖放的更多相关文章
- H5系列之History（必知必会）
H5系列之History(必知必会) 目录 概念 兼容性 属性 方法 H5方法 概念 理解History Api的使用方式 目的是为了解决哪些问题 作用:ajax获取数据时 ...
- Silverlight & Blend动画设计系列八：拖放(Drag-Drop)操作与拖放行为(DragBehavior)
在Silverlight中自身并没有提供拖放功能的相关实现,要实现拖放功能得借助其事件支持(MouseLeftButtonDown.MouseLeftButtonUp和MouseMove)来完成,实际 ...
- H5系列之地理位置（必知必会）
H5之地理位置必知必会 [02]概念 规范地址:http://www.w3.org/TR/geolocation-API/ HTML5 Geolocation(地理定位)用于定位用 ...
- H5系列之video自己编写控制栏
首先来了解一下 video, video呢,是H5 的标签,别人说的 H5播放器,没错 就是他了,利用video标签,可以实现视频播放. 但是啊,你会发现,在不同的浏览器上,播放器的 控制栏,都是不一 ...
- H5系列之canvas
what is canvas?(什么是canvas) 其实他只是H5里面的一个标签而已,那么他作为一个标签,肯定有他的用途,他就像是一幅画布,等待着你来作画.可以说,他只是一个容器而已,需要配合着Ja ...
- H5系列之常用的语义元素
H5添加了几个新标签,带有语义化的标签,像我们的div 和 span 标签,你说他两能干嘛呢, 好像他两什么事都能干.举个例子,你家里的房子,有几个房间,如果不分房间的话,是不是你 今天睡这里,明天睡 ...
- H5系列之新input
虽说H5 新填了几个很方便的input 类型,但是吧,想法是美好的,但是现实很残酷,兼容性不太好.基本只有google浏览器能用.但是既然出了,那么就要了解他,知道有这么一个东西就好. input类型 ...
- H5系列一、静态页面总结
1.img父标签设置高度,如果容器没有设置高度的话,图片会默认把容器底部撑大几像素 -- 大概3px,给容器设置高度. 2.input标记换行后默认有一个间隙,设置float属性.input标记默认还 ...
- H5系列之svg
svg呢,跟canvas其实都是用来画图的,只不过svg画的图,是矢量图,矢量图有个特点是,放大缩小,不会失真,canvas呢,是逐像素进行渲染的. 也就是,他依赖分辨率,会根据分辨率来决定图形是否清 ...
随机推荐
- buuctf-misc [BJDCTF2020]认真你就输了
下载压缩包,打开发现有一个10.xls打开一乱码,发现不了头绪,但是发现了pk开头 那我们能不能将这个.xls改成.zip 说干就干,于是我们改成zip解压 打开xl,然后再打开 在chars中发现f ...
- python定义函数后跟->的意义
举例 def xxx(x) 后面跟着一个->数据类型 比如->int:(别忘了冒号) 作用很简单 挺流氓的 直接让函数返回值为这个类型 非常方(liu)便(mang)
- Linux的top命令及交换分区
TOP命令关键指标 %MEM,在内存中的占用率 %CPU,使用率,如果两核,最大可到200% TIME+, 占用cpu的总时间/s SHR,分享内存 RES, 常驻内存,进程当前使用的内存大小,不包括 ...
- Kubernetes 使用 Ingress 实现灰度发布功能
使用 Ingress 实现灰度发布 一.Canary 规则说明 Ingress-Nginx 是一个K8S ingress工具,支持配置 Ingress Annotations 来实现不同场景下的灰度发 ...
- 【总结】docker
1 docker概述 1.1 docker简介 Docker目标是实现轻量级的操作系统虚拟化解决方案.比虚拟机更轻量级. 虚拟机可以理解成一栋楼里的一个个房间(共享花园基地等),而docker可以理解 ...
- 怎么购买合适的4G DTU
4G DTU指的是采用FDD-LTE或者TD-LTE的4G网络实现将是本地串口数据进行无线长距离数据传输,和远程公网服务器进行数据交互,主要用于远程数据采集和远程控制项目.在购买之前,也要对4G DT ...
- soloPi安装使用
SoloPi脚本转化器正式发布,支持转化为 Appium 与 Macaca 脚本:https://github.com/soloPi/SoloPi-Convertor,脚本转化器使用教程: https ...
- uniapp微信小程序canvas隐藏
HTML 我是把canvas嵌套在view里并被view设置id <view id="canvas"> <canvas style="width: 35 ...
- 抓紧下载了！2020最新版《神经网络与深度学习》中文版，PDF免费开放下载
介绍<神经⽹络和深度学习>是⼀本免费的在线书,对读者数学知识需求适度,兼顾理论和动手实践.⽬前给出了在图像识别.语⾳识别和⾃然语⾔处理领域中很多问题的最好解决⽅案,教读者在神经⽹络和深度学 ...
- 3.2 表 ADT -3.3 Java Collection API 中的表
3.2 表 ADT 处理形如 A0, A1, A2, --, AN-1 的一般的表.我们称这个表大小为N.将大小为0的特殊表称为空表 对于除空表以外的任何表,称 Ai-1 前驱 Ai,Ai 后继 Ai ...