Html5拖放的实现方法

作者：匿名字体：[增加减小] 来源：互联网时间：2018-12-03

本文主要包含Html5,h5,拖放等相关知识,匿名希望在学习及工作中可以帮助到您

设置元素可以拖放

设置元素可以拖放用draggable属性，设置为true。元素就可以拖放了。（注：火狐浏览器不支持）

拖拽元素事件

ondragstart：拖拽前触发

ondrag：拖拽中连续触发

ondragend：拖拽结束触发

目标元素事件

ondragenter：移入目标元素时触发

ondragover：移入目标元素后连续触发

ondragleave：离开目标元素触发

ondrop：在目标元素释放鼠标触发

事件的执行顺序

1、drop不触发的时候

dragstart>drag>dragenter>dragover>dragleave>dragend

2、drop触发的时候（dragover的时候阻止默认事件）

dragstart>drag>dragenter>dragover>drop>dragend

解决火狐下的问题

必须设置 dataTransfer对象才可以拖拽图片外的其他标签

setData（）：设置数据key和value（必须是字符串）

getData（）：获取数据，根据key值，获取相应的value

offctAllowed：设置光标样式

setDragImage：设置拖拽样式，三个参数：指定的元素、坐标X、坐标y

拖拽元素事件具体代码：

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	div{
	width: 200px;
	height: 200px;
	background: red;
	}
	</style>
	</head>
	<body>
	<div draggable="true"></div>

	<script type="text/javascript">
	//获取元素
	var oDiv = document.querySelector('div');

	//开始拖拽时元素变为绿色
	oDiv.ondragstart = function(){
	console.log('开始拖拽时触发')
	oDiv.style.background = 'green';
	}

	//拖拽结束变为红色
	oDiv.ondragend = function(){
	console.log('拖拽结束触发');
	oDiv.style.background = 'red'
	}

	oDiv.ondrag = function(){
	console.log('拖拽时连续触发');
	}
	</script>
	</body>
	</html>

目标元素事件具体代码：

相关文章