dom操做元素的拖拽drag

時間 2019-11-24

標籤 dom 元素 drag 欄目 HTML 简体版

原文原文鏈接

生命週期：
dragstart-drag-dragenter-dragover-drop-dragendhtml

1.將拖放元素設置成可拖放的
   <div draggable="true">
2.寫事件處理
   child.ondragstart = function(event){
       var dt = event.dataTransfer;
       dt.setData('text/plain',this.id);
   }
   parent.ondragover = function(event){
       //將放置元素設置成可放置的
       event.preventDefault();
   }
   parent.ondrop = function(event){
       var dt = event.dataTransfer;
       var id = dt.getData('text/plain');
       var node = document.getElementById(id);
       this.appendChild(node);
       //爲了防止父元素也綁定了ondrop事件，從而引起的冒泡
       event.stopPropagation();
       //處理火狐新出的選項卡
       event.preventDefault();
   }
   同一個元素在頁面上只存在一次。
   是拖拽，ondrop ---> 獲取了元素，追加到了位置元素。該節點跑到了位置元素裏，原來位置上的節點就沒有了。
   dt.effectAllowed
       只能在dragstart中使用
       設置視覺效果
   dt.setDragImage(img,x,y);
       設置光標的圖片，100，100，圖片在光標的左上100距離處
node

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>拖拽</title>
	<style>
		body{
			height: 500px;
		}
		.parent{
			border:1px solid red;
			height: 200px;
		}
		.child{
			border:1px solid blue;
			width: 100px;
			height: 100px;
			margin:10px;
		}
	</style>
	<script>
		window.onload = function(){
			var parent = document.getElementsByClassName('parent')[0];
			var child = document.getElementsByClassName('child')[0];
			// 綁定事件
			// 在要拖放的元素上有dragstart  drag dragend事件
			child.ondragstart = function(event){
				console.log('開始拖放');
				// dt 存一個值 獲取dataTransfer對象
				var dt = event.dataTransfer;
				// 設置值
				dt.setData('text/plain',this.id);
			}
			child.ondrag = function(){
				console.log('開始移動');
			}
			child.ondragend = function(){
				console.log('拖放結束');
			}
			// 在要放置的位置元素上有dragenter dragover  drop事件
			parent.ondragenter = function(){
				console.log('進入位置元素');
			}
			parent.ondragover = function(event){
				// 將位置元素設置成可放置的元素
				event.preventDefault();
				console.log('在位置元素內移動');
			}
			parent.ondrop = function(event){
				console.log('開始放置');
				// dt 取值
				var dt = event.dataTransfer;
				var id = dt.getData('text/plain');
				var node = document.getElementById(id);
				this.appendChild(node);
				// 阻止冒泡
				event.stopPropagation();
				// 處理火狐的默認事件
				// 阻止默認
				event.preventDefault();
			}
			//給body設置成可放置的元素
			//給body綁定放置事件
			document.body.ondragover = function(event){
				event.preventDefault();
			}
			document.body.ondrop = function(event){
				var dt = event.dataTransfer;
				var id = dt.getData('text/plain');
				var node = document.getElementById(id);
				this.appendChild(node);
				// 阻止冒泡
				event.stopPropagation();
				// 阻止默認
				event.preventDefault();
			}
		}
	</script>
</head>
<body>
	<div class="parent"></div>
	<div class="child" draggable="true" id="one"></div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。