JS实现宫格拖动动画效果

最新推荐文章于 2023-02-05 14:56:25 发布

我爱吃豆芽呀

最新推荐文章于 2023-02-05 14:56:25 发布

阅读量1.8w

点赞数 4

分类专栏：前端学习文章标签： JS 拖动动画宫格

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

版权

前端学习专栏收录该内容

26 篇文章 1 订阅

订阅专栏

效果图如下：

效果图

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";
	}
}

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

我爱吃豆芽呀

关注

4
点赞
踩
2

收藏

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

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

扫一扫