实现多个div拖拽移动，交换位置功能，代码复制可运行，有交换特效

最新推荐文章于 2024-05-15 02:47:45 发布
最新推荐文章于 2024-05-15 02:47:45 发布
阅读量4.2k 收藏 12
点赞数 6
分类专栏： js/jquery 前端 css 文章标签： jQuery js html css 移动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_38084879/article/details/77336931
版权
前端 同时被 3 个专栏收录
11 篇文章 0 订阅
订阅专栏
js/jquery
9 篇文章 0 订阅
订阅专栏
css
1 篇文章 0 订阅
订阅专栏

拖动标题行可交换

废话不多说，直接上代码：

drag.css

 

	
	#moveBar1{ 
		position: absolute; 
		left:2px;
		top:2px;
		width: 250px; 
		height: 300px; 
		background: #666; 
		border: solid 0px #000; 
		opacity: 0.6;
		z-index:1;
	}
	#moveBar2{ 
		position: absolute; 
		left:2px;
		top:310px;
		width: 250px; 
		height: 300px; 
		background: #666; 
		border: solid 0px #000; 
		opacity: 0.6;
		z-index:1;
	}
	#moveBar3{ 
		position: absolute;
		left:254px;
		top:2px; 
		width: 250px; 
		height: 300px; 
		background: #666; 
		border: solid 0px #000; 
		opacity: 0.6;
		z-index:1;
	}
	#moveBar4{ 
		position: absolute;
		left:254px;
		top:310px; 
		width: 250px; 
		height: 300px; 
		background: #666; 
		border: solid 0px #000; 
		opacity: 0.6;
		z-index:1;
	}
	#moveBar5{ 
		position: absolute; 
		left:506px;
		top:2px; 
		width: 250px; 
		height: 300px; 
		background: #666; 
		border: solid 0px #000; 
		opacity: 0.6;
		z-index:1;
	}
	#moveBar6{ 
		position: absolute; 
		left:506px;
		top:310px; 
		width: 250px; 
		height: 300px; 
		background: #666; 
		border: solid 0px #000; 
		opacity: 0.6;
		z-index:1;
	}
	#moveBar7{ 
		position: absolute; 
		left:758px;
		top:2px;
		width: 250px; 
		height: 300px; 
		background: #666; 
		border: solid 0px #000; 
		opacity: 0.6;
		z-index:1;
	}
	#moveBar8{ 
		position: absolute;
		left:758px;
		top:310px;  
		width: 250px; 
		height: 300px; 
		background: #666; 
		border: solid 0px #000; 
		opacity: 0.6;
		z-index:1;
	} 
	#banner1,#banner2,#banner3,#banner4,#banner5,#banner6,#banner7,#banner8{ 
		background: #666; 
		cursor: move; 
	}

drag.js

 

$(function () { 
	var oleft,uleft,left=[0,0,0,0,0,0,0,0,0,0,0];//原始位置，鼠标松开位置，交换位置,left距离
	var otop,utop,top=[0,0,0,0,0,0,0,0,0,0,0];原始位置，鼠标松开位置，交换位置,top距离
	var keen=200;//交换位置灵敏度
	var i=0,j=0;
	$('#banner1').mousedown( 
		function (event) { 
			j++;
			var isMove = true; 
			var abs_x = event.pageX - $('#moveBar1').offset().left; 
			var abs_y = event.pageY - $('#moveBar1').offset().top;
			oleft=$('#moveBar1').offset().left;//鼠标按下时，div距离左边的像素
			otop=$('#moveBar1').offset().top;//鼠标按下时，距离上边的像素
			for(var k=0;k<8;k++){
				$("#moveBar"+(k+1)).css({"z-index":1});
			}
			$("#moveBar1").css({"z-index":2});
			$(document).mousemove(function (event) { 
					if (isMove) { 
						var obj = $('#moveBar1'); 
						obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y}); 
					} 
				} 
			);$(document).mouseup(
				function () { 
					i++;
					isMove = false;
					if(i==j){
						uleft=$('#moveBar1').offset().left;
						utop=$('#moveBar1').offset().top;
						for(var k=0;k<8;k++){
							left[k]=$("#moveBar"+(k+1)).offset().left;
							top[k]=$("#moveBar"+(k+1)).offset().top;
						}
						for(var k=0;k<8;k++){
							if(k!=0){
								if(0<=uleft-left[k]&&uleft-left[k]<=keen&&0<=utop-top[k]&&utop-top[k]<=keen){
									$("#moveBar1").animate({"left":left[k],"top":top[k]});
									$("#moveBar"+(k+1)).animate({"left":oleft,"top":otop});
									break;
								}
							}else{
								continue;
							}
						}
						
					}
				}
				
			); 
			i=0;
		} 
		
	);
	
	$('#banner2').mousedown( 
		function (event) { 
			j++;
			var isMove = true; 
			var abs_x = event.pageX - $('#moveBar2').offset().left; 
			var abs_y = event.pageY - $('#moveBar2').offset().top;
			oleft=$('#moveBar2').offset().left;//鼠标按下时，div距离左边的像素
			otop=$('#moveBar2').offset().top;//鼠标按下时，距离上边的像素
			for(var k=0;k<8;k++){
				$("#moveBar"+(k+1)).css({"z-index":1});
			}
			$("#moveBar2").css({"z-index":2});
			$(document).mousemove(function (event) { 
					if (isMove) { 
						var obj = $('#moveBar2'); 
						obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y}); 
					} 
				} 
			);$(document).mouseup(
				function () { 
					i++;
					isMove = false;
					if(i==j){
						uleft=$('#moveBar2').offset().left;
						utop=$('#moveBar2').offset().top;
						for(var k=0;k<8;k++){
							left[k]=$("#moveBar"+(k+1)).offset().left;
							top[k]=$("#moveBar"+(k+1)).offset().top;
						}
						for(var k=0;k<8;k++){
							if(k!=1){
								if(0<=uleft-left[k]&&uleft-left[k]<=keen&&0<=utop-top[k]&&utop-top[k]<=keen){
									$("#moveBar2").animate({"left":left[k],"top":top[k]});
									$("#moveBar"+(k+1)).animate({"left":oleft,"top":otop});
									break;
								}
							}else{
								continue;
							}
						}
						
					}
				}
				
			); 
			i=0;
		} 
		
	);
	
	$('#banner3').mousedown( 
		function (event) { 
			j++;
			var isMove = true; 
			var abs_x = event.pageX - $('#moveBar3').offset().left; 
			var abs_y = event.pageY - $('#moveBar3').offset().top;
			oleft=$('#moveBar3').offset().left;//鼠标按下时，div距离左边的像素
			otop=$('#moveBar3').offset().top;//鼠标按下时，距离上边的像素
			for(var k=0;k<8;k++){
				$("#moveBar"+(k+1)).css({"z-index":1});
			}
			$("#moveBar3").css({"z-index":2});
			$(document).mousemove(function (event) { 
					if (isMove) { 
						var obj = $('#moveBar3'); 
						obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y}); 
					} 
				} 
			);$(document).mouseup(
				function () { 
					i++;
					isMove = false;
					if(i==j){
						uleft=$('#moveBar3').offset().left;
						utop=$('#moveBar3').offset().top;
						for(var k=0;k<8;k++){
							left[k]=$("#moveBar"+(k+1)).offset().left;
							top[k]=$("#moveBar"+(k+1)).offset().top;
						}
						for(var k=0;k<8;k++){
							if(k!=2){
								if(0<=uleft-left[k]&&uleft-left[k]<=keen&&0<=utop-top[k]&&utop-top[k]<=keen){
									$("#moveBar3").animate({"left":left[k],"top":top[k]});
									$("#moveBar"+(k+1)).animate({"left":oleft,"top":otop});
									break;
								}
							}else{
								continue;
							}
						}
						
					}
				}
				
			); 
			i=0;
		} 
		
	);
	
	$('#banner4').mousedown( 
		function (event) { 
			j++;
			var isMove = true; 
			var abs_x = event.pageX - $('#moveBar4').offset().left; 
			var abs_y = event.pageY - $('#moveBar4').offset().top;
			oleft=$('#moveBar4').offset().left;//鼠标按下时，div距离左边的像素
			otop=$('#moveBar4').offset().top;//鼠标按下时，距离上边的像素
			for(var k=0;k<8;k++){
				$("#moveBar"+(k+1)).css({"z-index":1});
			}
			$("#moveBar4").css({"z-index":2});
			$(document).mousemove(function (event) { 
					if (isMove) { 
						var obj = $('#moveBar4'); 
						obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y}); 
					} 
				} 
			);$(document).mouseup(
				function () { 
					i++;
					isMove = false;
					if(i==j){
						uleft=$('#moveBar4').offset().left;
						utop=$('#moveBar4').offset().top;
						for(var k=0;k<8;k++){
							left[k]=$("#moveBar"+(k+1)).offset().left;
							top[k]=$("#moveBar"+(k+1)).offset().top;
						}
						for(var k=0;k<8;k++){
							if(k!=3){
								if(0<=uleft-left[k]&&uleft-left[k]<=keen&&0<=utop-top[k]&&utop-top[k]<=keen){
									$("#moveBar4").animate({"left":left[k],"top":top[k]});
									$("#moveBar"+(k+1)).animate({"left":oleft,"top":otop});
									break;
								}
							}else{
								continue;
							}
						}
						
					}
				}
				
			); 
			i=0;
		} 
		
	);
	
	$('#banner5').mousedown( 
		function (event) { 
			j++;
			var isMove = true; 
			var abs_x = event.pageX - $('#moveBar5').offset().left; 
			var abs_y = event.pageY - $('#moveBar5').offset().top;
			oleft=$('#moveBar5').offset().left;//鼠标按下时，div距离左边的像素
			otop=$('#moveBar5').offset().top;//鼠标按下时，距离上边的像素
			for(var k=0;k<8;k++){
				$("#moveBar"+(k+1)).css({"z-index":1});
			}
			$("#moveBar5").css({"z-index":2});
			$(document).mousemove(function (event) { 
					if (isMove) { 
						var obj = $('#moveBar5'); 
						obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y}); 
					} 
				} 
			);$(document).mouseup(
				function () { 
					i++;
					isMove = false;
					if(i==j){
						uleft=$('#moveBar5').offset().left;
						utop=$('#moveBar5').offset().top;
						for(var k=0;k<8;k++){
							left[k]=$("#moveBar"+(k+1)).offset().left;
							top[k]=$("#moveBar"+(k+1)).offset().top;
						}
						for(var k=0;k<8;k++){
							if(k!=4){
								if(0<=uleft-left[k]&&uleft-left[k]<=keen&&0<=utop-top[k]&&utop-top[k]<=keen){
									$("#moveBar5").animate({"left":left[k],"top":top[k]});
									$("#moveBar"+(k+1)).animate({"left":oleft,"top":otop});
									break;
								}
							}else{
								continue;
							}
						}
						
					}
				}
				
			); 
			i=0;
		} 
		
	);
	
	$('#banner6').mousedown( 
		function (event) { 
			j++;
			var isMove = true; 
			var abs_x = event.pageX - $('#moveBar6').offset().left; 
			var abs_y = event.pageY - $('#moveBar6').offset().top;
			oleft=$('#moveBar6').offset().left;//鼠标按下时，div距离左边的像素
			otop=$('#moveBar6').offset().top;//鼠标按下时，距离上边的像素
			for(var k=0;k<8;k++){
				$("#moveBar"+(k+1)).css({"z-index":1});
			}
			$("#moveBar6").css({"z-index":2});
			$(document).mousemove(function (event) { 
					if (isMove) { 
						var obj = $('#moveBar6'); 
						obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y}); 
					} 
				} 
			);$(document).mouseup(
				function () { 
					i++;
					isMove = false;
					if(i==j){
						uleft=$('#moveBar6').offset().left;
						utop=$('#moveBar6').offset().top;
						for(var k=0;k<8;k++){
							left[k]=$("#moveBar"+(k+1)).offset().left;
							top[k]=$("#moveBar"+(k+1)).offset().top;
						}
						for(var k=0;k<8;k++){
							if(k!=5){
								if(0<=uleft-left[k]&&uleft-left[k]<=keen&&0<=utop-top[k]&&utop-top[k]<=keen){
									$("#moveBar6").animate({"left":left[k],"top":top[k]});
									$("#moveBar"+(k+1)).animate({"left":oleft,"top":otop});
									break;
								}
							}else{
								continue;
							}
						}
						
					}
				}
				
			); 
			i=0;
		} 
		
	);
	
	$('#banner7').mousedown( 
		function (event) { 
			j++;
			var isMove = true; 
			var abs_x = event.pageX - $('#moveBar7').offset().left; 
			var abs_y = event.pageY - $('#moveBar7').offset().top;
			oleft=$('#moveBar7').offset().left;//鼠标按下时，div距离左边的像素
			otop=$('#moveBar7').offset().top;//鼠标按下时，距离上边的像素
			for(var k=0;k<8;k++){
				$("#moveBar"+(k+1)).css({"z-index":1});
			}
			$("#moveBar7").css({"z-index":2});
			$(document).mousemove(function (event) { 
					if (isMove) { 
						var obj = $('#moveBar7'); 
						obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y}); 
					} 
				} 
			);$(document).mouseup(
				function () { 
					i++;
					isMove = false;
					if(i==j){
						uleft=$('#moveBar7').offset().left;
						utop=$('#moveBar7').offset().top;
						for(var k=0;k<8;k++){
							left[k]=$("#moveBar"+(k+1)).offset().left;
							top[k]=$("#moveBar"+(k+1)).offset().top;
						}
						for(var k=0;k<8;k++){
							if(k!=6){
								if(0<=uleft-left[k]&&uleft-left[k]<=keen&&0<=utop-top[k]&&utop-top[k]<=keen){
									$("#moveBar7").animate({"left":left[k],"top":top[k]});
									$("#moveBar"+(k+1)).animate({"left":oleft,"top":otop});
									break;
								}
							}else{
								continue;
							}
						}
						
					}
				}
				
			); 
			i=0;
		} 
		
	);
	
	$('#banner8').mousedown( 
		function (event) { 
			j++;
			var isMove = true; 
			var abs_x = event.pageX - $('#moveBar8').offset().left; 
			var abs_y = event.pageY - $('#moveBar8').offset().top;
			oleft=$('#moveBar8').offset().left;//鼠标按下时，div距离左边的像素
			otop=$('#moveBar8').offset().top;//鼠标按下时，距离上边的像素
			for(var k=0;k<8;k++){
				$("#moveBar"+(k+1)).css({"z-index":1});
			}
			$("#moveBar8").css({"z-index":2});
			$(document).mousemove(function (event) { 
					if (isMove) { 
						var obj = $('#moveBar8'); 
						obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y}); 
					} 
				} 
			);$(document).mouseup(
				function () { 
					i++;
					isMove = false;
					if(i==j){
						uleft=$('#moveBar8').offset().left;
						utop=$('#moveBar8').offset().top;
						for(var k=0;k<8;k++){
							left[k]=$("#moveBar"+(k+1)).offset().left;
							top[k]=$("#moveBar"+(k+1)).offset().top;
						}
						for(var k=0;k<8;k++){
							if(k!=7){
								if(0<=uleft-left[k]&&uleft-left[k]<=keen&&0<=utop-top[k]&&utop-top[k]<=keen){
									$("#moveBar8").animate({"left":left[k],"top":top[k]});
									$("#moveBar"+(k+1)).animate({"left":oleft,"top":otop});
									break;
								}
							}else{
								continue;
							}
						}
						
					}
				}
				
			); 
			i=0;
		} 
		
	);
} );

 

 

 

 

index.html

 

 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8">
<title>Qing's Web</title> 
<script src="js/jquery.js" type="text/javascript"></script> 
<link rel="stylesheet" href="css/drag.css" type="text/css"/>
<script type="text/javascript"src="js/drag.js"> </script> 
</head> 
<body style="padding-top: 50px;"> 
<div id="sortable">
	<div id="moveBar1" class="ui-state-default"> 
		<div id="banner1">标题1</div> 
		<div class="content"></div> 
	</div> 
	<div id="moveBar2"class="ui-state-default"> 
		<div id="banner2">标题2</div> 
		<div class="content"></div> 
	</div> 
	<div id="moveBar3"class="ui-state-default"> 
		<div id="banner3">标题3</div> 
		<div class="content"></div> 
	</div> 
	<div id="moveBar4"class="ui-state-default"> 
		<div id="banner4">标题4</div> 
		<div class="content"></div> 
	</div> 
	<div id="moveBar5"class="ui-state-default"> 
		<div id="banner5">标题5</div> 
		<div class="content"></div> 
	</div> 
	<div id="moveBar6"class="ui-state-default"> 
		<div id="banner6">标题6</div> 
		<div class="content"></div> 
	</div> 
	<div id="moveBar7"class="ui-state-default"> 
		<div id="banner7">标题7</div> 
		<div class="content"></div> 
	</div> 
	<div id="moveBar8"class="ui-state-default"> 
		<div id="banner8">标题8</div> 
		<div class="content"></div> 
	</div> 

</div>

</body> 
</html>

文档结构图

运行效果：

Love_云宝儿
关注
  • 6
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
vue3中实现鼠标随意拖动修改div的位置
weixin_45633755的博客
06-28 1345
在vue3中实现鼠标随意拖动改变div的位置
html拖拽页面特效,好看漂亮的html5网页特效学习笔记(6)_拖拽可跟随的图标
weixin_29485605的博客
06-03 363
效果：图标列表可打开/关闭，可拖拽主图标。使用foundation-icons.css的图标系统，这个系统有超多常用图标，不用再自己找了。使用jquery-ui.min.js来实现拖拽。使用anime.js实现移动动画。anime.js内置超多动画选项，再也不用自己一个个去css里设计了，只要传传参即可。使用jquery，但并无复杂逻辑，上手难度：简单。源码：学习笔记(javascript分步详细...
2024年最新vue实现div拖拽互换位置，在线面试的注意事项
最新发布
2401_84446825的博客
05-15 297
最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。e.dataTransfer.effectAllowed = “move”//为需要移动的元素设置dragstart事件。
vue实现拖拽交换位置功能
ssk777888的博客
03-01 782
vue实现拖拽交换位置功能
首页模块可自由拖动的切换位置，带动画效果
qq_37957866的博客
12-26 788
需求：在其他页面添加首页报表模块。模块添加到首页后，可随意拖动，并插入当前位置。 <template> <div class="content-default" style="padding: unset;overflow-y: scroll"> <transition-group tag="div" class="container"&g...
javascript拖曳互换div的位置
popstarqq的博客
06-27 728
div拖曳更换div元素位置的实现方式如下；主要利用drag事件 <!-- div拖曳调换顺序 适用gis中切换图层顺序--> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></t...
Vue实现移动端拖拽交换位置
10-15
在Vue.js中实现移动端的拖拽交换位置功能，可以极大地提升用户体验，特别是在处理如图片排序、列表布局等交互场景。以下是一个详细的实现步骤和关键知识点： 1. **基础组件结构**： 在给出的代码中，`<template>`...
vue实现div可拖动位置也可改变盒子大小的原理
10-14
在Vue中实现一个div元素既可以拖动改变位置，又可以调整大小的功能，涉及到的核心技术包括事件监听、CSS定位以及DOM操作。下面将详细介绍实现这一功能的步骤和原理。 首先，我们需要监听鼠标事件来处理拖动和改变...
vue实现div拖拽互换位置
10-17
主要为大家详细介绍了vue实现div拖拽互换位置的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
3个js拖动DIV移动位置的特效代码.rar
07-10
本下载包包括了3个js拖动特效，拖动DIV移动指定位置，一个实例是任意位置的拖动，不受限制，想拖动到哪里就拖动到哪里；另一个是指定位置的拖动，由左侧拖动到右侧指定位置，拖动结束后，左侧会少一个DIV，右侧新增...
js实现div拖动动画运行轨迹效果代码分享
11-25
这是一款基于js实现的div拖动动画运行轨迹效果源码，是一款原生js div拖动效果制作鼠标拖动div动画运行轨迹效果代码。可以选择【记住轨迹】与【不记住轨迹】两种拖动显示模式，从而显示出不同的拖动效果。 运行效果...
div 拖动改变位置
06-05
div 拖动 交换位置
div拖动互换位置
09-26
一个div拖动互换位置的demo，还有很大优化的空间，目前不支持保存拖拽后的位置，刷新后恢复原始布局，仅供参考，不支持位置保存，请谨慎下载。
页面div拖动交换位置，动态添加删除页面元素
04-23
页面div拖动交换位置，动态添加删除页面元素
鼠标拖动div标签，动态改变位置
qq_19599645的博客
05-02 3050
简单来说就是鼠标拖着div在屏幕上走，当然也适用于其他的标签。没什么可说的，比较简单，直接上代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>div_mousemove</title> </head> <style type...
vue - pc端实现对div的拖动功能
qq_43886365的博客
04-27 3064
vue中pc端实现对div的拖动功能 1，`mousedown()` 鼠标按下时需要计算位置差，因为clientX和offsetLeft的属性返回的位置不一样 要相减得到鼠标在拖动元素内实际点击的位置， 后面每一次拖动时都要减去这个差值 否则就会造成你拖动的位置一直都是元素的左上角 而不是你之前点击的位置；
原生js 多个div拖拽互换位置
Hank0607的博客
04-02 457
用原生js实现多个div拖拽互换位置 html代码 <div id="big"> <div class="lit" draggable="true">1</div> <div class="lit" draggable="true">2</div> <div class="lit" draggable="true">3</div> <div class="
VUE、快应用 实现多个DIV上下移动随意交换位置
weixin_45791806的博客
02-17 2132
虚拟数据 SchoolObj: ['a','b','c'], template模板渲染数据（快应用和vue语法差不多） $idx：快应用的数据循环索引； 也可以写成for="{{(index,item) in SchoolObj}}"； <div for="{{item in SchoolObj}}" class="colleges-list"> <text>{{item}}</text> <text onclick="UpBtn($idx)"&gt
JavaScript实现多个div块之间相互拖放，交换位置(内容)
SKTfaker
09-08 9291
自己写的一个小页面，直接放代码。<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>数据源配置：配置</title> <link href="style/base.css" rel="stylesheet" type="text/css" /> <style> *{ mar
写一个多个div任意位置拖拽功能
06-09
好的，以下是一个实现多个div任意位置拖拽的示例代码： HTML部分： ```html <div id="myDiv1" class="draggable">可拖动的div1</div> <div id="myDiv2" class="draggable">可拖动的div2</div> <div id="myDiv3" class="draggable">可拖动的div3</div> ``` CSS部分： ```css .draggable { position: absolute; cursor: move; } ``` JavaScript部分： ```javascript var draggables = document.querySelectorAll(".draggable"); var activeDraggable = null; var initialX, initialY, currentX, currentY, xOffset = 0, yOffset = 0; draggables.forEach(function(draggable) { draggable.addEventListener("mousedown", dragStart); draggable.addEventListener("mouseup", dragEnd); draggable.addEventListener("mousemove", drag); }); function dragStart(event) { activeDraggable = this; initialX = event.clientX - xOffset; initialY = event.clientY - yOffset; } function dragEnd(event) { initialX = currentX; initialY = currentY; activeDraggable = null; } function drag(event) { if (activeDraggable) { event.preventDefault(); currentX = event.clientX - initialX; currentY = event.clientY - initialY; xOffset = currentX; yOffset = currentY; setTranslate(currentX, currentY, activeDraggable); } } function setTranslate(xPos, yPos, el) { el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)"; } ``` 这个代码会使得拥有class为draggable的所有div元素可以被拖动，并且当拖动结束时会被放置在最后一次拖动的位置上。可以通过修改CSS样式来控制这些div元素的样式和位置。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值