js九宫格拖拽交换

关注

VIP免费原创最新推荐文章于 2026-06-15 11:06:31 发布 1.4k 阅读 AI 写同款· GEO 优化 ›

原生js写九宫格拖拽换位使用原生JS写出一个九宫格，实现九个格子何以拖拽换位的效果效果演示具体思路分析和代码：图解1： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</t 阅读详情

js九宫格拖拽交换

以下为代码内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>九宫格拖拽</title>
    </head>
    <style type="text/css">
        #content{
            width: 300px;
            height:300px;
            margin: 0 auto;
            background: #F47564;
            position: relative;
        }
        #content div{
            width: 100px;
            height: 100px;
            float: left;
            line-height: 100px;
            text-align: center;
            font-size:40px;
            font-weight: 900;
            color: #fff;
            cursor: pointer;
            position: absolute;
        }
        #content div:nth-child(1){
            background:#f74747;
            top: