Html5拖放的实现方法

时间2024-01-22 21:58:15发布访客分类HTML浏览647

导读：收集整理的这篇文章主要介绍了Html5拖放的实现方法，觉得挺不错的，现在分享给大家，也给大家做个参考。今天写一下htML5的拖放问题。设置元素可以拖放 @H_360_18@ 设置元素可以拖放用Draggable属性，设置为true。...

收集整理的这篇文章主要介绍了Html5拖放的实现方法，觉得挺不错的，现在分享给大家，也给大家做个参考。

设置元素可以拖放

@H_360_18@ 设置元素可以拖放用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; iaLi.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拖放的实现方法的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！