H5 拖拽操作

前言

在原生H5中，可以通过提供的api实现在网页内元素的拖拽操作。相对于传统的写法更加的简单。

而想要实现拖拽，主要需要进行两个方面的工作，第一是给元素设置draggable='true'属性，img和a标签是默认允许拖拽的。第二是编写拖拽相关的事件处理函数。

拖拽主要的过程

在整个拖拽的过程中，可以把行为分成两个部分，一部分是关于拖拽元素的操作，另外一个部分是关于拖拽元素最终放置的容器上的操作。

当拖拽元素时，拖拽事件执行的流程如下：

dragstart -> drag -> dragend

dragstart事件的触发时机是在按住鼠标开始拖动的时候，只会触发一次。

drag事件是在按住鼠标拖动的过程中触发,是属于持续触发的状态。

dragend事件是在释放鼠标之后触发，此时无论是已经将目标放在了有效的位置还是放在了无效的位置上，都会触发这个事件。

放置元素主要经历的过程

当我们放置元素时，需要经历的事件变化流程如下：

dragenter -> dragover -> drop

dragenter 事件，当拖拽元素被拖拽到了目标元素上，就会被触发

dragover 事件，当拖拽的元素被拖拽到了目标元素上并且在目标元素上移动时，就会持续性的触发。

drop 事件，拖拽的元素放在了目标元素身上的时候会被触发。

tip: 这当中在dragover事件之后还包含了dragleave事件，当元素离开了目标元素时触发。

整体的拖拽流程如下:

dragstart->drag->dragenter->dragover->dragleave->drop->dragend

例如:

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style type="text/css">

		.box {

			width:100px;

			height: 100px;

			background-color: lightblue;

		}

		#content {

			width:300px;

			height: 300px;

			border:2px solid #222;

			position: absolute;

			right:0;

			top:0;

		}

	</style>

</head>

<body>

	<div class="box" draggable='true'></div>

	<div id="content"></div>

</body>

<script type="text/javascript">

	var box = document.getElementsByTagName('div')[0];

	var content = document.getElementById('content');

	box.ondragstart = function() {

		console.log(1111)

		event.dataTransfer.setData('Text',this.className);

	}

	box.ondrag = function() {

		console.log(2222)

	}

	box.ondragend = function() {

		console.log(3333)

	}

	content.ondragenter = function() {

		console.log('enter')

	}

	content.ondragover = function() {

		console.log('over')

		event.preventDefault();

	}

	content.ondrop = function() {

		console.log('drop')

		var data = event.dataTransfer.getData('Text');

		this.appendChild(document.getElementsByClassName(data)[0])

	}

</script>

</html>

实现的效果：

tip: 想要顺利的完成拖拽，需要在dragover事件里阻止默认行为，event.preventDefault();

火狐的兼容问题

在火狐浏览器里，如果仅仅给元素设置draggable='true'这个属性，是无法完成拖拽的[谷歌没有问题]。

要解决这个问题必须为拖拽元素绑定dragstart事件处理函数，并且在该函数中调用event.dataTransfer.setData函数

// box 是拖拽的元素

box.ondragstart = function() {

	console.log(1111)

	event.dataTransfer.setData('Text',this.className);

}

同时，在火狐浏览器当中，当我们直接进行拖拽的时候，发现会产生打开新选项卡的现象，解决办法是在所有的容器代码里，都加上阻止默认行为的代码：

event.preventDefault();

event.stopPropagation();

H5 拖拽操作的更多相关文章

  1. H5拖拽 构造拖拽及缩放 pdf展示

    前言: 协助项目需要实现一个签名的功能. 功能说明:1.有文本签名和头像签名.2.头像签名需要实现可拖拽功能.3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置. 功能一:实现拖拽 思 ...

  2. H5 拖拽读取文件和文件夹

    1)拖拽方面的重点是:ondragover 事件 和 ondrop 事件 ondragover 是必须的,ondragover 事件里禁用掉 html 的默认事件,否则 ondrop 事件将无效(直接 ...

  3. H5拖拽 构造拖拽及缩放 pdf文件转换为html预览

    前言: 协助项目需要实现一个签名的功能. 功能说明:1.有文本签名和头像签名.2.头像签名需要实现可拖拽功能.3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置. 功能一:实现拖拽 思 ...

  4. C#拖拽操作

    C#的拖拽 本文将以Winform为例 有两个主要的事件: DragEnter 拖拽到区域中触发的事件 DragDrop 当拖拽落下的时候出发此事件 饮水思源 参考博客: http://www.cnb ...

  5. WPF 的拖拽操作（DragDrop）

    在WPF中似乎没有对拖拽操作进行改变,和以前的方式一样.如果曾近在 Windows 窗体应用程序中使用过鼠标拖放,就会发现在 WPF 中的编程接口实际上没有发生变化.重要的区别是用于拖放操作的方法和事 ...

  6. 微信小程序~触摸相关事件（拖拽操作、手势识别、多点触控）

    touchstart     手指触摸动作开始 touchmove    手指触摸后移动 touchcancel  手指触摸动作被打断,如来电提醒,弹窗 touchend      手指触摸动作结束 ...

  7. selenium中各个模块操作：下拉框、鼠标悬浮连贯、拼图拖拽操作、以及其他拖拽操作、连线操作

    1.下拉框的修改操作 方法一:定位到元素后,通过select选择对应的值 方法二:通过两次点击的方法:没有select的value属性时,采用click两次的方法去选择: click第一次后,出现下拉 ...

  8. 仿h5拖拽

    在h5中有个拖拽的声明式命令,就如html属性一样,简单强大. 而在网页上拖拽的功能还是需求很大的,所以对这方面应该去仔细了解一下. 所以仿一一下它的实现.只是仿了它的复制一份到目标容器的功能.它还有 ...

  9. 爱上MVC3~MVC+ZTree实现对树的CURD及拖拽操作

    回到目录 上一讲中,我们学习了如何使用zTree对一棵大树(大数据量的树型结构的数据表,呵呵,名称有点绕,但说的是事实)进行异步加载,今天这讲,我们来说说,如何去操作这棵大树,无非就是添加子节点,删除 ...

随机推荐

  1. golang 中Pointers Vs References

    原文: https://spf13.com/post/go-pointers-vs-references/ Pointers Vs References Some languages includin ...

  2. 服务器上的UID按钮

    定位用的,比如你机柜上有很多台机器,你在前面按下UID灯,机器后面也有一个UID灯会亮起来,这样当你到后面去的时候你就知道刚才在前面看的是哪一台,另外,有人通过ILO远程端口连接到你的服务器的时候,U ...

  3. P5650 基础字符串练习题

    设定'0'权值为1,设定'1'权值为-1 然后就是最大子段和 #include <cstdio> #include <algorithm> #include <cstri ...

  4. Linux一些常用的命令

    常见命令 cd命令 cd命令用来切换工作目录至dirname, 其中dirName表示法可为绝对路径或相对路径. pwd命令 pwd命令以绝对路径的方式显示用户当前工作目录. ls命令 ls命令用来显 ...

  5. Neo4j入门博客分享

    Neo4j学习参考博客:https://www.cnblogs.com/ljhdo/p/5516793.html Neo4j Cypher查询语言详解 http://www.ttlsa.com/nos ...

  6. ACM-ICPC 2018 焦作赛区网络预赛 K. Transport Ship（DP）

    题目链接:https://nanti.jisuanke.com/t/31720 题意:有n种飞船,每种飞船有(1 << c)- 1  艘,容量为 k[i] ,q 次询问,每次询问选若干艘飞 ...

  7. POJ1961 Period && POJ2604 Power Strings 字符串循环节

    两道题都是求循环节的...但是一道是学哈希时做的,另一道是学$KMP$时做的 POJ2604 用的哈希...枚举长度的因数作为循环节的长度,然后暴力算出所有循环节位置的哈希值,看看是否相等. #inc ...

  8. 洛谷P4317 花神的数论题

    洛谷题目链接 数位$dp$ 我们对$n$进行二进制拆分,于是就阔以像十进制一样数位$dp$了,基本就是套模板.. 接下来是美滋滋的代码时间~~~ #include<iostream> #i ...

  9. linux下如何编辑txt文档

    利用vi命令 [root@bogon a]# vi a.txt   打开a.txt文档 vi a.txt后,键盘敲i,可以进入编辑模式, 输入完内容后按ESC键,键盘输入  :wq   可以保存并退出 ...

  10. 新西达电调初始化代码，使用nodejs ffi技术调用wiringpi，代码使用typescript编写

    这是我设计的F450四轴飞行器飞控代码的一部分 运行在orangepi-zero上,操作系统是armbian,思路是使用node-ffi调用wiringpi的so库与GPIO通信,然后控制端逻辑代码使 ...