H5 学习笔记（day01）拖放API、dataTransfer对象

最新推荐文章于 2023-05-11 17:12:00 发布

DragonLoveYQ

最新推荐文章于 2023-05-11 17:12:00 发布

阅读量306

点赞数 1

分类专栏：个人学习文章标签： js

本文链接：https://blog.csdn.net/DragonLoveYQ/article/details/109885492

版权

个人学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

拖放事件

在H5中，任何元素都支持拖放，但是需要注意的是，有些元素存有默认事件比如（ a元素 )，应当取消该元素的默认事件

使用 preventDefault() 取消事件的默认动作
用法 ele.preventDefault()

拖动事件

事件	概述
ondragstart	当元素开始被拖动时触发——开始拖动
ondrag	拖动时触发（不管鼠标有没有移动）——正在拖动
ondragend	元素在拖动操作结束（放置）时——拖动结束

注意:ondrag事件在拖动元素时一直触发

<body>
	<img src="1.jpg" id='1' alt="">
	<img src="2.jpg" id='2' alt="">
	<img src="3.jpg" id='3' alt="">
	<img src="4.jpg" id='4' alt="">
	<img src="5.jpg" id='5' alt="">
</body>
<script>
	img[0].ondragstart = function(e){
		console.log('我开始开始拖动了')
		}
	img[0].ondrag = function(e){
		console.log('我正在拖动呢')
	}
	img[0].ondragend = function(e){
		console.log('我拖动结束了')
	}
	img[1].ondragenter = function(e){
		console.log(e.target)
		console.log('img[0]拖动到我身上触发了我')
	}
	img[1].ondragover = function(e){
		e.preventDefault()
		console.log(e.target)
		console.log('img[0]在我身上拖动不断触发了我')
	}
	img[1].ondragleave = function(e){
		
		console.log(e.target)
		console.log('img[0]在我身上离开触发了我')
	}
	img[1].ondrop = function(e){
		console.log(e.target)
		console.log('img[0]释放在我身上触发了我')
		//但是要在ondragover事件上阻止默认事件e.preventDefault()才能触发我不然没效果
	}
</script>

放置事件

事件	描述
ondragenter	被拖放的元素开始进入另外一个元素的范围内时触发
ondragover	拖放源在元素内部拖动时不断被触发
ondragleave	拖放源离开元素边界时触发
ondrop	拖放源被释放（放置）到元素内部时触发

注意：只有在拖拽时触发相关事件，鼠标事件是不会触发的。

dataTransfer对象

属性

例子：e.dataTransfer.files

属性	描述
files	其他属性返回和放置相关的所有文件
types	属性使用数组的形式返回当前注册格式
effectAllowed	此属性通知浏览器当前可被用户选用的操作
dropEffect	拖放的操作类型，决定了浏览器如何显示鼠标形状
items	属性返回所有项与相关格式所有文件

方法

dataTransfer对象提供了一些方法用于在源元素与目标元素中共享数据

例子：e.dataTransfer.setDat( ‘data’,‘我是要储存的数据’ ) //在dataTransfer对象中注册此对象（data）

e.dataTransfer.getData( ‘data’ )

方法	描述
setData(type,data)	用于声明所发送的数据与类型
getData(type)	返回指定type的数据
clearData(type)	删除指定类型的数据，不填指定删除所有
setDragImage(element,x,y)	使用图像元素作为参考，同时使用此参数作为拖放反回图像
addElement(element）	提供一个页面元素作为参考，同时使用参数作为拖放反馈图像

注意：addElement(）紧用于火狐

setDragImage(element,x,y)

//例子：
	<body>
		<img src="1.jpg" id='1' alt="">
		<img src="2.jpg" id='2' alt="">
		<img src="3.jpg" id='3' alt="">
		<img src="4.jpg" id='4' alt="">
		<img src="5.jpg" id='5' alt="">
	</body>
	<script>
	
			var img = document.getElementsByTagName('img')
			
			img[0].ondragstart = function(e){
				e.dataTransfer.setData('data','我是数据')//发送（储存）数据 （名字，数据）
				var data = e.dataTransfer.getData('data')//获取上面发送的 我是数据
				console.log(data) // 我是数据
				
				e.dataTransfer.setDragImage(img[2],50,50)
				//拖动出来的图片对象变成了自己所指定的图片
				// 本来拖出来的图片是自身( img[0] )  但是变成了 img[2] 因为指定了img[2] 
				// 50 50 是鼠标拖动时固定在相对于图片左上角的 0，0的位置 
			}
	</script>

setDragImage

addElement(element)

仅用于火狐


<body>
	<img src="1.jpg" id='1' alt="">
	<img src="2.jpg" id='2' alt="">
	<img src="3.jpg" id='3' alt="">
	<img src="4.jpg" id='4' alt="">
	<img src="5.jpg" id='5' alt="">
</body>
<script>
var img = document.getElementsByTagName('img')

	img[0].ondragstart = function(e){
		e.dataTransfer.addElement(img[2]) //按下拖动自身但是 显示拖动图片二
	}
</script>

效果如下：

按下图片一的时候

在这里插入图片描述

拖动图片一的时候

DragonLoveYQ

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
H5 学习笔记（day01）拖放API、dataTransfer对象

拖放事件在H5中，任何元素都支持拖放，但是需要注意的是，有些元素存有默认事件比如（ a元素 )，应当取消该元素的默认事件使用 preventDefault() 取消事件的默认动作用法 ele.preventDefault()拖动事件事件概述ondragstart当元素开始被拖动时触发——开始拖动ondrag拖动时触发（不管鼠标有没有移动）——正在拖动ondragend元素在拖动操作结束（放置）时——拖动结束注意:ondrag事件在拖动元素时
复制链接

扫一扫