拖放

最新推荐文章于 2022-12-24 17:32:31 发布

周朝兵

最新推荐文章于 2022-12-24 17:32:31 发布

阅读量162

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/m0_45251955/article/details/103915254

版权

HTML5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

连接到上一篇博客“音频”

拖放

拖放是一种常见的功能，在很多网站上都有应用，比如验证码，就可以使用拖放来完成，相必很多人都见过，今天我们就来看看拖放到底是怎么完成的。
在HTML5中，拖放是标准的一部分，任何元素都能拖放，想要实现拖放，我们至少要了解这几个属性：
1、ondragstart
ondragstart这个属性表示拖动元素时，会发生什么；
2、ondragover
ondragover这个属性表示在何处放置被拖动的元素，在浏览器中，默认的时不能讲数据放置到其他元素中。
3、ondrop
ondrop表示在拖动过程中会发生什么

有了这三个属性，相信大家已经有了思路了，但是还有一个问题，大部分属性默认是不可拖动的，只有少部分可以，比如img标签，a标签等，那么如果碰到不可拖动的元素怎么办呢？那就需要用到下面这个属性：
draggable=“true”
draggable表示元素是否可拖放，等于true表示可以拖放，在将元素设置这个属性后，就可以用鼠标来拖动元素了。

举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0;
			}
			#div{
				width: 150px;
				height: auto;
				position: absolute;
				padding-bottom: 20px;
				border: 1px solid;
			}
			li{
				width: 100px;
				height: 30px;
				background-color: #abcdee;
				margin: 10px;
				list-style: none;
			}
			.mubiao{
				position: absolute;
				left: 300px;
				width: 150px;
				height: auto;
				border: 1px solid;
				padding-bottom: 20px;
			}
		</style>
	</head>
	<body>
		<div id="div">
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</div>
		<div class="mubiao"></div>
		<script>
			var dragDom;//记录被拖拽的元素
			var lilist = document.getElementsByTagName("li");
			for(var i =0;i<lilist.length;i++){
				lilist[i].setAttribute("draggable",true);
				lilist[i].ondragstart = function(e){
					dragDom = e.target;
					console.log(dragDom)
				}
			}
			var mubiao = document.getElementsByClassName("mubiao")[0];
			mubiao.ondragover = function(e){
				e.preventDefault();
			}
			mubiao.ondrop= function(){
				mubiao.appendChild(dragDom);
				dragDom = null;
			}
		</script>
	</body>
</html>

上面代码大致意思就是将li拖动到另一个div中其中 preventDefault() 表示避免浏览器对数据的默认处理，通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。被拖数据是被拖元素的 id 把被拖元素追加到放置元素（目标元素）中。
再来看一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
	#img1{
		position: absolute;
	}
	.img2{
		margin-top: 50px;
	}
	.lj{
		width: 600px;
		height: 500px;
		border: 1px solid;
		margin-left: 800px;
	}
	.yc{
		width: 290px;
		height: 435px;
		position: absolute;
		border: 1px solid;
	}
</style>
<body>
	<div class="yc" ondragover="doe(event)" ondrop="drop(event)">
		<img src="imgs/parseBg.jpg" id="img1" ondragstart="drag(event)" >
	</div>
	<div class="lj" ondragover="doe(event)" ondrop="drop(event)">
		<img src="imgs/123.jpg" class="img2">
	</div>
	<script type="text/javascript">
	function doe(event){
		event.preventDefault();
	}
	function drag(event){
		event.dataTransfer.setData("Text",event.target.id);
	}
	function drop(event){
		event.preventDefault();//取消默认
		var data = event.dataTransfer.getData("Text");//获取保存图片的id
		event.target.appendChild(document.getElementById(data));//将图片添加到div中
	}
	</script>
</body>
</html>

这个实现的时将图片来回拖动的效果，从一个div中拖放到另一个div中，并且可以拖回来，关键位置都写了注释。

周朝兵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
拖放

拖放拖放是一种常见的功能，在很多网站上都有应用，比如验证码，就可以使用拖放来完成，相必很多人都见过，今天我们就来看看拖放到底是怎么完成的。在HTML5中，拖放是标准的一部分，任何元素都能拖放，想要实现拖放，我们至少要了解这几个属性：1、ondragstartondragstart这个属性表示拖动元素时，会发生什么；2、ondragoverondragover这个属性表示在何处放置被拖动...
复制链接

扫一扫