拖拽事件(附加代码事例)

心碎南瓜粥

已于 2022-08-31 15:49:49 修改

阅读量394

点赞数 1

文章标签： javascript 前端 css3

于 2022-08-31 15:48:17 首次发布

本文链接：https://blog.csdn.net/zhouzhou20002000/article/details/126625232

版权

拖拽事件

拖放元素:设置当前元素可拖放 draggable=‘true’
放置元素:默认是不可以放置得取消默认行为 event.preventDefault()
拖放事件:拖放元素使用 on拖放事件类型
dragstart(开始拖放) drag(正在拖放) dragend(拖放结束)
放置事件:放置元素使用 on放置事件类型
dragenter(进入放置元素) dragover(放置元素内移动) drop(放置在放置元素内)
传输数据:event.dataTransfer.setData();
开始拖放事件获取数据:event.dataTransfer.getData();
放置事件drop
拖拽事件流:dragstart->drag->dragenter->dragover->drop->drapend


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.parent{
			height: 200px;
			border: 2px solid rgb(82, 150, 90);
		}
		.child{
			width: 100px;
			height: 100px;
			background-color: rgb(200, 200, 242);
			color: white;
			float: left;
			margin:10px 0 0 10px;
		}
		body{
			height: 400px;
		}
	</style>
	<script>
		window.onload=function(){
			// 获取parent和child
			var parent=document.querySelector('.parent');
			var childs=document.querySelectorAll('.child');
			childs=Array.from(childs);
			// 给每一个孩子节点绑定事件
			// childs.forEach(function(item){
			// 	item.οnclick=function(){
			// 		parent.appendChild(this)
			// 	}
			// });
			childs.forEach(function(item){
				// 拖动事件 
				// 开始拖动 on事件类型
				item.ondragstart=function(event){
					console.log('ondragstart开始拖动了');
					// console.log(event,'事件对象');
					// 将拖动元素得id传出去
					// dataTransfer.setData 传输数据 key value
					console.log(item.id);
					event.dataTransfer.setData('id',item.id);
				}
				// 正在拖动
				item.ondrag=function(){
					console.log('ondrap正在拖动');
				}
				// 拖动结束
				item.ondragend=function(){
					console.log('ondragend拖动结束');
				}
			})
			// 放置事件 --放置元素 parent
			// 进入到放置元素
			parent.ondragenter=function(){
				console.log('ondragenter进入到放置元素');
			}
			// 在放置元素内移动
			parent.ondragover=function(){
				console.log('ondragover正在放置元素内移动');
				// 将放置元素设置为可放置
				event.preventDefault();
			}
			// 将拖动元素放置到放置元素
			parent.ondrop=function(event){
				console.log('ondrop放置');
				//获取拖动元素传输得数据getData(key)
				// console.log(event.dataTransfer.getData('id'),'事件对象');
				var id=event.dataTransfer.getData('id');
				this.appendChild(document.querySelector('#'+id))
				// 阻止事件冒泡
				event.stopPropagation()
			}
			// 将拖动元素放置到body
			document.body.ondragover=function(){
				console.log('ondragover正在放置元素内移动');
				// 将放置元素设置为可放置
				event.preventDefault();
			}
			// 将拖动元素放置到放置元素
			document.body.ondrop=function(event){
				console.log('ondrop放置');
				//获取拖动元素传输得数据getData(key)
				// console.log(event.dataTransfer.getData('id'),'事件对象');
				var id=event.dataTransfer.getData('id');
				this.appendChild(document.querySelector('#'+id))
				// 阻止事件冒泡
				event.stopPropagation()
			}
			
			
		}
	</script>
</head>
<body>
	<!-- 放置元素:parent  放置事件:dragenter dragover drop-->
	<!-- 拖动元素:child 拖动事件：dragstart drag dragend-->
	<div class="parent"></div>
	<!-- 设置当前元素可拖拽 draggable设置当前元素是否可拖拽 -->
	<div class="child" id="one" draggable="true">one</div>
	<div class="child" id="two" draggable="true">two</div>
	<div class="child" id="three" draggable="true">three</div>
	<div class="child" id="four" draggable="true">four</div>
</body>
</html>