Html5如何实现拖放

发布时间：2020-07-15 10:20:10 来源：亿速云阅读：111 作者：Leah 栏目：web开发

本篇文章给大家分享的是有关Html5如何实现拖放，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

设置元素可以拖放

设置元素可以拖放用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>

目标元素事件具体代码：

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	#div1{
	width: 100px;
	height: 100px;
	background: red;
	}
	#div2{
	width: 200px;
	height: 200px;
	border: solid 1px;
	}
	</style>
	</head>
	<body>
	<div id="div1" draggable="true"></div>
	<div id="div2"></div>
	<script type="text/javascript">
	//获取元素
	var oDiv1 = document.querySelector("#div1");
	var oDiv2 = document.querySelector("#div2");

	//目标元素事件
	oDiv2.ondragenter = function(){
	console.log('移入目标元素触发')
	oDiv2.style.borderColor = 'blue'
	}

	oDiv2.ondragleave = function(){
	console.log('移除目标元素触发')
	oDiv2.style.borderColor = 'black'
	}

	oDiv2.ondragover = function(ev){
	console.log('移入到目标元素后连续触发');

	var event = window.event \|\| ev;
	//阻止默认事件
	event.preventDefault()

	}

	//要想触发ondrop事件，必须在ondragover事件中阻止默认事件
	oDiv2.ondrop = function(){

	console.log('在目标元素中释放拖放元素触发')

	oDiv2.appendChild(oDiv1)
	}
	</script>
	</body>
	</html>

解决火狐浏览器的拖放问题具体代码：

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	li{
	list-style: none;
	width: 100px;
	height: 40px;
	margin-top: 10px;
	background: orange;
	}
	div{
	width: 200px;
	height: 200px;
	background: red;
	margin: 0 auto;
	}
	</style>
	</head>
	<body>
	<ul>
	<li draggable="true">1</li>
	<li draggable="true">2</li>
	<li draggable="true">3</li>
	</ul>
	<div></div>
	<script type="text/javascript">

	var aLi = document.querySelectorAll("li");
	//目标元素事件
	var oDiv = document.querySelector("div");
	//拖放元素事件
	//解决火狐浏览器拖放问题:在开始拖放时设置setData()方法
	for(var i=0;i<aLi.length;i++){

	//添加属性，存储下标
	aLi[i].index = i;

	aLi[i].ondragstart = function(ev){
	var event = window.event \|\| ev;
	event.dataTransfer.setData('test',this.index+1)

	//设置光标样式
	event.dataTransfer.effectAllowed = 'uninitialized';

	//设置拖拽样式
	event.dataTransfer.setDragImage(oDiv,100,100)
	}
	}



	oDiv.ondragover = function(ev){
	var event = window.event \|\| ev;
	event.preventDefault();
	}
	//释放元素时弹框
	oDiv.ondrop = function(ev){

	var event = window.event \|\| ev;
	var value = event.dataTransfer.getData('test','张三')
	alert(value)
	}
	</script>
	</body>
	</html>

以上就是Html5如何实现拖放，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。

向AI问一下细节

猜你喜欢