九宫格（用原生js实现）

最新推荐文章于 2025-07-17 18:27:24 发布

原创

最新推荐文章于 2025-07-17 18:27:24 发布 · 6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #原生js #拖拽

本文介绍了一种使用原生JavaScript实现的九宫格，该九宫格允许用户交换1-9的任意方格，并具有拖放功能。当方块被拖放到外部后，它会自动返回到原来的位置。实现包括HTML和CSS代码。

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

1、本文的九宫格是用原生的js实现的；

2、实现的九宫格效果是：可交换1-9的任意方格，且将方格拖拽至大盒子外松开后可自动回到拖拽之前的位置。

3、代码如下：

html代码：

<ul id="box">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>

css代码：

body,div,p,h1,h2,h3,h4,h5,h6,ol,ul,li,dl,dt,dd,th,tr,td,hr,caption,table,form,img,input,legend,fieldset{
	margin:0;
	padding:0;
}
html {
	overflow: hidden;
}
ul {
	list-style: none;
}
#box {
	position: relative;
	margin: 20px auto;
	width: 640px;
	height: 640px;
	border: 1px solid #eee;
}
#box li {
	position: absolute;
	width: 200px;
	height: 200px;
	line-height: 200px;
	text-align: center;
	font-size: 40px;
	font-weight: bold;
	background: #eee;
}
#box .active {
	z-index: 1;
	color: #fff;
	background: blue;
}

js代码：