js九宫格拖拽交换

最新推荐文章于 2024-03-26 22:08:13 发布

原创

最新推荐文章于 2024-03-26 22:08:13 发布 · 1.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#九宫格拖拽交换js #js拖拽效果 #js九宫格 #拖拽交换js #js拖拽+交换效果

本文介绍如何使用JavaScript实现九宫格布局中元素的拖拽及交换功能，详细讲解了相关代码实现和逻辑处理。

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: