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拖放的更多相关文章

  1. H5系列之History(必知必会)

    H5系列之History(必知必会)   目录 概念 兼容性 属性 方法 H5方法       概念     理解History Api的使用方式 目的是为了解决哪些问题   作用:ajax获取数据时 ...

  2. Silverlight & Blend动画设计系列八:拖放(Drag-Drop)操作与拖放行为(DragBehavior)

    在Silverlight中自身并没有提供拖放功能的相关实现,要实现拖放功能得借助其事件支持(MouseLeftButtonDown.MouseLeftButtonUp和MouseMove)来完成,实际 ...

  3. H5系列之地理位置(必知必会)

    H5之地理位置必知必会     [02]概念   规范地址:http://www.w3.org/TR/geolocation-API/     HTML5 Geolocation(地理定位)用于定位用 ...

  4. H5系列之video自己编写控制栏

    首先来了解一下 video, video呢,是H5 的标签,别人说的 H5播放器,没错 就是他了,利用video标签,可以实现视频播放. 但是啊,你会发现,在不同的浏览器上,播放器的 控制栏,都是不一 ...

  5. H5系列之canvas

    what is canvas?(什么是canvas) 其实他只是H5里面的一个标签而已,那么他作为一个标签,肯定有他的用途,他就像是一幅画布,等待着你来作画.可以说,他只是一个容器而已,需要配合着Ja ...

  6. H5系列之常用的语义元素

    H5添加了几个新标签,带有语义化的标签,像我们的div 和 span 标签,你说他两能干嘛呢, 好像他两什么事都能干.举个例子,你家里的房子,有几个房间,如果不分房间的话,是不是你 今天睡这里,明天睡 ...

  7. H5系列之新input

    虽说H5 新填了几个很方便的input 类型,但是吧,想法是美好的,但是现实很残酷,兼容性不太好.基本只有google浏览器能用.但是既然出了,那么就要了解他,知道有这么一个东西就好. input类型 ...

  8. H5系列一、静态页面总结

    1.img父标签设置高度,如果容器没有设置高度的话,图片会默认把容器底部撑大几像素 -- 大概3px,给容器设置高度. 2.input标记换行后默认有一个间隙,设置float属性.input标记默认还 ...

  9. H5系列之svg

    svg呢,跟canvas其实都是用来画图的,只不过svg画的图,是矢量图,矢量图有个特点是,放大缩小,不会失真,canvas呢,是逐像素进行渲染的. 也就是,他依赖分辨率,会根据分辨率来决定图形是否清 ...

随机推荐

  1. log4j日志级别怎么搞

    日志的级别之间的大小关系如右所示:ALL < TRACE < DEBUG < INFO < WARN < ERROR < FATAL < OFF Log4j建 ...

  2. vivo 基于原生 RabbitMQ 的高可用架构实践

    一.背景说明 vivo 在 2016 年引入 RabbitMQ,基于开源 RabbitMQ 进行扩展,向业务提供消息中间件服务. 2016~2018年,所有业务均使用一个集群,随着业务规模的增长,集群 ...

  3. java后端选型20200729

    参考地址:https://gitee.com/shuzheng/zheng 后端技术: 技术 名称 官网 Spring Framework 容器 http://projects.spring.io/s ...

  4. Reading Face, Read Health论文阅读笔记

    摘要: 随着计算技术觉.人工智能和移动技术的发展,利用计算机读脸技术去识别每个人每天的健康是可行的.怎么去设计一个基于FRT(face reading technologies)的用于得到每天的保健实 ...

  5. STM32入门系列-STM32外设地址映射

    片上外设区分为四条总线,根据外设速度的不同,不同总线挂载着不同的外设,APB1挂载低速外设,APB2和AHB挂载高速外设.相应总线的最低地址我们称为该总线的基地址,总线基地址也是挂载在该总线上的首个外 ...

  6. Android Choreographer 源码分析

    Choreographer 的作用主要是配合 Vsync ,给上层 App 的渲染提供一个稳定的 Message 处理的时机,也就是 Vsync 到来的时候 ,系统通过对 Vsync 信号周期的调整, ...

  7. 11/6笔记 补充(Redis持久化,RDB&&AOF)

    11/6补充笔记 修改redis-6379.conf里面的save10秒2个数据发生改变 (save 10 2) 修改一次数据不发生改变,修改2次数据才发生改变 继续修改数据,发现还是一样的规律 增删 ...

  8. leetcode148two-sum

    Given an array of integers, find two numbers such that they add up to a specific target number. The ...

  9. 使用webapi绑定layui数据表格完整增删查改记录

    因为每次给layui数据表格绑定数据或者类似操作的时候  总要重新做一遍 而且忘记很多东西 所以干脆写博客把相关东西记录下来 便于查阅和修正 以下是一个完整的数据表格i项目的增删改查案例 先来看后台 ...

  10. webpack配置babel篇

    babel-polyfill & babel-runtime & babel-preset-env babel-core babel-core 的作用是把 js 代码分析成 ast , ...