HTML学习笔记（二）

最新推荐文章于 2024-08-13 10:10:57 发布

Rainly1

最新推荐文章于 2024-08-13 10:10:57 发布

阅读量146

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/Rainly1/article/details/97830716

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1、HTML5新增的拖放API
html5中 img 是默认可拖拽的 a 标签加上href也是
而对于普通元素开发者只要把该元素的draggable属性设置为true

<div id="source" draggable="true" style="width:80px;height:80px; border:1px solid black; background-color:#bbb; float:right;">
	教育
</div>
<script type="text/javascript">
	var source = document.getElementById("source");
	source.ondragstart - function(evt){
		evt.dataTransfer.setData("text","疯狂软件")
	}		
</script>

而有的浏览器在你移动的时候会有一个禁止的标志不被允许阻止了默认的拖动事件
可以加上

document.ondragover = function（evt）{
	//取消时间默认行为 不单单可以在这个时间中使用比如 链接的跳转可以让他不响应
	return false;
}

拖放操作相关的事件
在这里插入图片描述

自由拖动的div元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base target="_blank" href="http://www.crazyit.org"/>
	<title>Title</title>
	
</head>

<body>
	<div id="source" draggable="true" style="width:80px;height:80px; border:1px solid black; background-color:#bbb; float:right;">
		教育
	</div>
	
</body>
	<script type="text/javascript">
		var source = document.getElementById("source");
		source.ondragstart = function(evt){
		//让拖动操作携带数据
			evt.dataTransfer.setData("text","aaa");
			
		}
				
		document.ondragover = function(evt){
			return false;
		}
		
			document.ondrop = function(evt){
			source.style.position = "absolute";
			source.style.left = evt.pageX+"px";
			source.style.top = evt.pageY+"px";
			
			return false;
			
		}
	
	</script>
</html>

升级版两个块拖动互不干扰


	<div id="source" ondrag="change(this.id)" draggable="true" style="width:80px;height:80px; border:1px solid black; background-color:#bbb; float:right;">
		教育
	</div>
	
	<div id="source1" ondrag="change(this.id)" draggable="true" style="width:80px;height:80px; border:1px solid black; background-color:#bbb; float:right;">
		教育sssssss
	</div>

	<script type="text/javascript">
		change = function(id){

			var source = document.getElementById(id);
			source.ondragstart = function(evt){
				evt.dataTransfer.setData("text","sss ");
				
			}
					
			document.ondragover = function(evt){
				return false;
			}
			
				document.ondrop = function(evt){
				//这几个属性都是evt事件带有的属性可以f12查看				
				source.style.position = "absolute";
				source.style.left = evt.pageX+"px";
				source.style.top = evt.pageY+"px";
				return false;
				
			}
		}
	
	</script>