Html5如何實現(xiàn)拖放

發(fā)布時間：2020-07-15 10:20:10 來源：億速云閱讀：117 作者：Leah 欄目：web開發(fā)

本篇文章給大家分享的是有關(guān)Html5如何實現(xiàn)拖放，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

設(shè)置元素可以拖放

設(shè)置元素可以拖放用draggable屬性，設(shè)置為true。元素就可以拖放了。（注：火狐瀏覽器不支持）

拖拽元素事件

ondragstart：拖拽前觸發(fā)

ondrag：拖拽中連續(xù)觸發(fā)

ondragend：拖拽結(jié)束觸發(fā)

目標元素事件

ondragenter：移入目標元素時觸發(fā)

ondragover：移入目標元素后連續(xù)觸發(fā)

ondragleave：離開目標元素觸發(fā)

ondrop：在目標元素釋放鼠標觸發(fā)

事件的執(zhí)行順序

1、drop不觸發(fā)的時候

dragstart>drag>dragenter>dragover>dragleave>dragend

2、drop觸發(fā)的時候（dragover的時候阻止默認事件）

dragstart>drag>dragenter>dragover>drop>dragend

解決火狐下的問題

必須設(shè)置 dataTransfer對象才可以拖拽圖片外的其他標簽

setData（）：設(shè)置數(shù)據(jù)key和value（必須是字符串）

getData（）：獲取數(shù)據(jù)，根據(jù)key值，獲取相應(yīng)的value

offctAllowed：設(shè)置光標樣式

setDragImage：設(shè)置拖拽樣式，三個參數(shù)：指定的元素、坐標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');

	//開始拖拽時元素變?yōu)榫G色
	oDiv.ondragstart = function(){
	console.log('開始拖拽時觸發(fā)')
	oDiv.style.background = 'green';
	}

	//拖拽結(jié)束變?yōu)榧t色
	oDiv.ondragend = function(){
	console.log('拖拽結(jié)束觸發(fā)');
	oDiv.style.background = 'red'
	}

	oDiv.ondrag = function(){
	console.log('拖拽時連續(xù)觸發(fā)');
	}
	</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('移入目標元素觸發(fā)')
	oDiv2.style.borderColor = 'blue'
	}

	oDiv2.ondragleave = function(){
	console.log('移除目標元素觸發(fā)')
	oDiv2.style.borderColor = 'black'
	}

	oDiv2.ondragover = function(ev){
	console.log('移入到目標元素后連續(xù)觸發(fā)');

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

	}

	//要想觸發(fā)ondrop事件，必須在ondragover事件中阻止默認事件
	oDiv2.ondrop = function(){

	console.log('在目標元素中釋放拖放元素觸發(fā)')

	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");
	//拖放元素事件
	//解決火狐瀏覽器拖放問題:在開始拖放時設(shè)置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)

	//設(shè)置光標樣式
	event.dataTransfer.effectAllowed = 'uninitialized';

	//設(shè)置拖拽樣式
	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如何實現(xiàn)拖放，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

猜你喜歡