Html5如何實現拖放

發布時間：2020-07-15 10:20:10 來源：億速云閱讀：121 作者：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問一下細節

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本