javascript中的拖拽效果

最新推荐文章于 2022-08-05 12:43:08 发布

原创最新推荐文章于 2022-08-05 12:43:08 发布 · 206 阅读

CC 4.0 BY-SA版权

本文介绍了如何在javascript中实现拖拽效果，包括设置拖拽元素、定义拖拽过程中的各个事件（ondragstart, ondrag, ondragend）以及释放效果（ondragenter, ondragover, ondragleave, ondrop），并提到了实现拖拽功能所需的函数。" 102306478,7872265,Unity Shader：跨平台渲染差异解析,"['Unity shader', '游戏开发', '渲染平台差异']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们想要实现javascript中的拖拽效果的步骤
1.设置拖拽的元素
2.给拖拽元素设置拖拽的效果：
(1)ondrafstart: 设置原对象开始拖动
(2)ondrag: 源对象被拖动的过程中(鼠标可能在移动也可能未移动)
(3)ondragend: 源对象被拖动结束
3.设置释放的效果
(1)ondragenter: 目标对象被源对象拖动进入
(2)ondragover: 目标对象被源对象拖动着悬浮在上方触发
(3)ondragleave:源对象被拖动着离开了目标对象
(4)ondrop: 源对象拖动着在目标对象的上方释放/松手触发
以上就是实现拖拽效果的步骤以及所需要的函数。具体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div_01,#div_02,#div_03{
				width: 300px;
				height: 300px;
				border: 2px solid deepskyblue;
				margin-right: 20px;
				/*display: inline-block;*/
				float: left;
			}
			#p1{
				/*background: pink;*/
				border: 2px solid red;
			}
		</style>
	</head>
	<body>
		<div id="div_01">
			<img src="images/1.jpg" id="img1" width="80" height="60" alt="" />
			<img src="images/2.jpg" id="img2" width="80" height="60" alt="" />
			<img src="images/3.jpg" id="img3" width="80" height="60" alt="" />
			<p id="p1" draggable="true">需要拖动的元素</p>
		</div>
		<div id="div_02"></div>
		<div id="div_03"></div>
		<script type="text/javascript">
			// 1, 需要拖放, 给那个设置拖放
			var img=document.querySelector('#img');
			var p1=document.querySelector('#p1'); 
			// 2, 找到源文件, 设置拖拽效果
				// (1)ondrafstart:  设置原对象开始拖动
				document.ondragstart=function(event){
					// console.log('原对象开始拖动');
					 event.dataTransfer.setData('text/html',event.target.id);
				}
				// (2)ondrag: 源对象被拖动的过程中(鼠标可能在移动也可能未移动)
				document.ondrag=function(){
					console.log('源对象在拖动的过程中');
				}
				// (3)ondragend: 源对象被拖动结束
				document.ondragend=function(){
					console.log('源对象被拖动结束');
				}
			// 3,找到目标文件设置释放效果
			var target=document.querySelector('#div_02');
			// (1)ondragenter: 目标对象被源对象拖动进入
			document.ondragenter=function(){
				console.log('目标对象被源对象 拖动着进入');
			}
			// (2)ondragover: 目标对象被源对象拖动着悬浮在上方触发
			document.ondragover=function(event){
				console.log('目标对象被源对象拖动着悬浮在上方触发');
				// 如果想要触发  ondrop事件则 需要在over 里面阻止默认行为
				// event.preventDefault();
				return false;
			}
			// (3)ondragleave:源对象被拖动着离开了 目标对象
			document.ondragleave=function(){
				console.log('离开了目标');
			}	
			// (4)ondrop:  源对象拖动着在目标对象的上方释放/松手触发
			document.ondrop=function(event){
				// console.log('在目标对象的上方 松手/释放');
				var id=event.dataTransfer.getData('text/html');
				event.target.appendChild(document.getElementById(id));
			}	
		</script>
	</body>
</html>