Html5拖放的实现方法-H5教程-PHP中文网

设置元素可以拖放

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

拖拽元素事件

ondragstart：拖拽前触发

ondrag：拖拽中连续触发

ondragend：拖拽结束触发

目标元素事件

ondragenter：移入目标元素时触发

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

ondragleave：离开目标元素触发

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

事件的执行顺序

1、drop不触发的时候

dragstart>drag>dragenter>dragover>dragleave>dragend

响应式烟草公司HTML5网站模板是一款适合提供各种不同种类的优质烟草公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

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

dragstart>drag>dragenter>dragover>drop>dragend

解决火狐下的问题

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

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

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

offctAllowed：设置光标样式

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

拖拽元素事件具体代码：




	charset="UTF-8">
	<span class="html-tag"></span>

	div{
	width: 200px;
	height: 200px;
	background: red;
	}



	draggable="true">

	<script class="html-attribute-name">type="<span class="html-attribute-value">text/javascript"></script>
	//获取元素
	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('拖拽时连续触发');
	}

目标元素事件具体代码：




	charset="UTF-8">
	<span class="html-tag"></span>

	#div1{
	width: 100px;
	height: 100px;
	background: red;
	}
	#div2{
	width: 200px;
	height: 200px;
	border: solid 1px;
	}



	id="div1" draggable="true">
	id="div2">
	<script class="html-attribute-name">type="<span class="html-attribute-value">text/javascript"></script>
	//获取元素
	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)
	}

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




	charset="UTF-8">
	<span class="html-tag"></span>

	li{
	list-style: none;
	width: 100px;
	height: 40px;
	margin-top: 10px;
	background: orange;
	}
	div{
	width: 200px;
	height: 200px;
	background: red;
	margin: 0 auto;
	}




	draggable="true">1
	draggable="true">2
	draggable="true">3


	<script class="html-attribute-name">type="<span class="html-attribute-value">text/javascript"></script>

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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！