HTML5拖放api

最新推荐文章于 2024-04-07 08:41:16 发布

风华正茂呀

最新推荐文章于 2024-04-07 08:41:16 发布

阅读量206

点赞数

分类专栏： JS学习日记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42149770/article/details/104393445

版权

JS学习日记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

Drag&Drop

提供专门的拖拽与投放的API
触发多个事件，可控制鼠标的形状与移动时的效果
可以跨页面拖放

draggable属性:true flase auto（设置这个元素是否可拖拽）
拖拽事件–ondragstart，drag，dragend（拖拽开始进行结束）
投放事件–dragenter，dragover，dragleave，drop
dataTransfer对象–setData/getData/setDragImage

实例：实现拖拽进垃圾桶删除并且显示删除内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
<script src="../jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	window.onload=function(){
		var aLi=document.getElementsByTagName('li');
		var oDiv=document.getElementById('out');
		var txt=document.getElementById('txt');
		var target=null;
		for (var i=0;i<aLi.length;i++){
			aLi[i].ondragstart=function(ev)
			{
				this.style.background='yellow';
				target=this;
				ev.dataTransfer.setData('text',this.innerHTML);	
		        console.log(target)
			}
			aLi[i].ondragend=function(){
				this.style.background='';
			}
			
		}
		
		oDiv.ondragenter=function(){
			this.style.borderColor='yellow';
		}
		oDiv.ondragover=function(ev){
			ev.preventDefault();
		}
		oDiv.ondragleave=function(){
			this.style.borderColor='red';
		}
		oDiv.ondrop=function(ev){
			this.style.borderColor='red';
			var oText=ev.dataTransfer.getData('text');
			txt.innerHTML='删除的是'+oText;
			target.remove()
		}
		
	}
</script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				overflow: hidden;
			}
			 li{
				 list-style: none;
				 width: 80px;
				 height: 50px;
				 line-height: 50px;
				 text-align: center;
				 border: #0000FF 1px solid;
				 float: left;
				 margin: 20px;
			 }
			 #out{
				 border: #FF0000 3px solid;
				 width: 100px;
				 height: 150px;
				 background-color: #808080;
				 margin: 100px;
				 color: #FF0000;
				 text-align: center;
				 line-height: 150px;
		
			 }
		</style>
	</head>
	<body>
		<ul>
			<li draggable="true">白色垃圾</li>
			<li draggable="true">香蕉皮</li>
			<li draggable="true">易拉罐</li>
			<li draggable="true">废纸屑</li>
		</ul>
		<p id="txt"></p>
		<div id="out">
			垃圾箱
		</div>
	</body>
</html>