JS实现宫格拖动动画效果-列表拖拽动画

liu__software

已于 2022-05-19 10:32:14 修改

阅读量770

点赞数

分类专栏： web前端文章标签： javascript 动画

于 2022-05-19 10:27:18 首次发布

原文链接：https://blog.csdn.net/woaidouya123/article/details/104384605

版权

web前端专栏收录该内容

105 篇文章 6 订阅

订阅专栏

效果图如下：

效果图

html布局：

<!DOCTYPE html>
<html>
<head>
	<title>dragLabel</title>
	<meta charset="utf-8">
</head>
<body>
	<div class="container">
		<div class="item" draggable="true"><span>1</span></div>
		<div class="item" draggable="true"><span>2</span></div>
		<div class="item" draggable="true"><span>3</span></div>
		<div class="item" draggable="true"><span>4</span></div>
		<div class="item" draggable="true"><span>5</span></div>
		<div class="item" draggable="true"><span>6</span></div>
		<div class="item" draggable="true"><span>7</span></div>
		<div class="item" draggable="true"><span>8</span></div>
		<div class="item" draggable="true"><span>9</span></div>
	</div>
</body>
</html>

css样式：

.container{
	width: 910px;
	font-size: 0px;
}
.item{
	font-size: 40px;
	color: white;
	width: 300px;
    height: 200px;
    background-color: yellowgreen;
    display: inline-block;
    text-align: center;
    position: absolute;
    cursor: grab;
    transition: left,top;
    transition-duration: 0.6s;
}
.item span{
    display: block;
    width: fit-content;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 auto;
    user-select: none;
}

JS实现：

var divs = document.querySelectorAll(".item"),i,div,dragDiv,isMoving = false;
for(i=0;i<divs.length;i++){
	divs[i].style["background-color"] = getRandomColor();
}
document.body.addEventListener("dragover",function(ev){
	ev.preventDefault();
})
sortDiv(divs);
for(i=0;i<divs.length;i++){
	div = divs[i];
	div.addEventListener("dragstart",function(e){
		dragDiv = this;
	})
	div.addEventListener("dragover",function(e){
		if(isMoving || this.isEqualNode(dragDiv)){
			return;
		}
		if(isPreviousElements(this,dragDiv)){
			this.parentNode.insertBefore(dragDiv,this.nextSibling);
		}else{
			this.parentNode.insertBefore(dragDiv,this);
		}
		isMoving = true;
		var st = setTimeout(function(){
			isMoving = false;
			clearTimeout(st);
		},600);
		sortDiv(document.querySelectorAll(".item"))
	})
}
 
// 随机生成颜色
function getRandomColor(){
	return "rgb(" + Math.random()*256 +","+ Math.random()*256+","+ Math.random()*256+")"
}
 
// 判断拖动元素是否在目标元素之前
function isPreviousElements(sourse, target){
	if(!sourse.previousSibling){
		return false;
	}
 
	if(target.isEqualNode(sourse.previousSibling)){
		return true;
	}
	return isPreviousElements(sourse.previousSibling, target)
}
 
// 位置排序
function sortDiv(divs){
	for(var i=0;i<divs.length;i++){
		divs[i].style.top = Math.floor(i/3)*201 + "px";
		divs[i].style.left = (i%3)*301 + "px";
	}
}

完整代码：

<!DOCTYPE html>
<html>
<head>
	<title>dragLabel</title>
	<meta charset="utf-8">
	<style>
		.container{
			width: 910px;
			font-size: 0px;
		}
		.item{
			font-size: 40px;
			color: white;
			width: 300px;
		    height: 200px;
		    background-color: yellowgreen;
		    display: inline-block;
		    text-align: center;
		    position: absolute;
		    cursor: grab;
		    transition: left,top;
		    transition-duration: 0.6s;
		}
		.item span{
		    display: block;
		    width: fit-content;
		    position: relative;
		    top: 50%;
		    transform: translateY(-50%);
		    margin: 0 auto;
		    user-select: none;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="item" draggable="true"><span>1</span></div>
		<div class="item" draggable="true"><span>2</span></div>
		<div class="item" draggable="true"><span>3</span></div>
		<div class="item" draggable="true"><span>4</span></div>
		<div class="item" draggable="true"><span>5</span></div>
		<div class="item" draggable="true"><span>6</span></div>
		<div class="item" draggable="true"><span>7</span></div>
		<div class="item" draggable="true"><span>8</span></div>
		<div class="item" draggable="true"><span>9</span></div>
	</div>
	<script>

		var divs = document.querySelectorAll(".item"),i,div,dragDiv,isMoving = false;
		for(i=0;i<divs.length;i++){
			divs[i].style["background-color"] = getRandomColor();
		}
		document.body.addEventListener("dragover",function(ev){
			ev.preventDefault();
		})
		sortDiv(divs);
		for(i=0;i<divs.length;i++){
			div = divs[i];
			div.addEventListener("dragstart",function(e){
				dragDiv = this;
			})
			div.addEventListener("dragover",function(e){
				if(isMoving || this.isEqualNode(dragDiv)){
					return;
				}
				if(isPreviousElements(this,dragDiv)){
					this.parentNode.insertBefore(dragDiv,this.nextSibling);
				}else{
					this.parentNode.insertBefore(dragDiv,this);
				}
				isMoving = true;
				var st = setTimeout(function(){
					isMoving = false;
					clearTimeout(st);
				},600);
				sortDiv(document.querySelectorAll(".item"))
			})
		}

		// 随机生成颜色
		function getRandomColor(){
			return "rgb(" + Math.random()*256 +","+ Math.random()*256+","+ Math.random()*256+")"
		}

		// 判断拖动元素是否在目标元素之前
		function isPreviousElements(sourse, target){
			if(!sourse.previousSibling){
				return false;
			}

			if(target.isEqualNode(sourse.previousSibling)){
				return true;
			}
			return isPreviousElements(sourse.previousSibling, target)
		}

		// 位置排序
		function sortDiv(divs){
			for(var i=0;i<divs.length;i++){
				divs[i].style.top = Math.floor(i/3)*201 + "px";
				divs[i].style.left = (i%3)*301 + "px";
			}
		}
	</script>
</body>
</html>

完整代码更新地址：github地址

转载于：https://blog.csdn.net/woaidouya123/article/details/104384605

liu__software

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JS实现宫格拖动动画效果-列表拖拽动画

效果图如下：html布局：<!DOCTYPE html><html><head> <title>dragLabel</title> <meta charset="utf-8"></head><body> <div class="container"> <div class="item" draggable="true"><span>1</s
复制链接

扫一扫

专栏目录