Html5的拖放功能

我有顆小粒的痣發表於2017-10-28
HTML

Html5的拖放也就是（drag 和 drop）是HTML5 標準的組成部分

我們可以用js 來實現這樣的功能，其中用到了Html Dom 物件 event 當然也有一些事件控制程式碼和Html屬性


程式碼上：


<!-- html5 拖放-->

<!doctype html>
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
	<script type="text/javascript">
		function allowDrop(ev){//允許放置元素
			ev.preventDefault();//阻止預設的狀態（不能放置）
		}

		function drag(ev){//拖拽元素
			ev.dataTransfer.setData("Text", ev.target.id);//獲取元素的id
		}
		function drop(ev){//放置元素
			ev.preventDefault();//阻止預設狀態
			var data = ev.dataTransfer.getData("Text");//建立變數來儲存元素的id
			ev.target.appendChild( document.getElementById(data));//定義子元素為拖放元素
		}
	</script>
<body>
	<div id="contain" ondrop="drop(event)" ondragover="allowDrop(event)" style="height:300px;width:500px;border:2px solid #000;"></div>
	<!-- ondrop事件 放置事件  ondragover事件 拖拽時在元素上方時的事件 -->
	<div id="drag" draggable="true" ondragstart="drag(event)" style="height:200px;width:300px;background:red;">Drag Me!</div>	<!-- draggable屬性規定是否可以拖放 ondragstart事件 開始拖放時的事件 -->
</body>
</html>


關注一下event物件：


圖片來源於W3school

相關文章