Question

我有一个div，它以小div和一个空格为起点。我想要做的是当我点击任何与空白区相邻的div时，点击的div必须移动到那个空的空间并创建另一个空的空间，然后点击它时它将被其附近的任何其他div占用。这个想法是小div必须有自动机制来决定移动的位置将/必须用css位置控制。我很高兴jquery任何建议将不胜感激这是我的代码，我刚刚开始使用两行div但是在我去4行之前我无法做到这一点

<html>
    <head> 
    <title>divs</title>
        <link rel="stylesheet" media="all" type="text/css" href="css/main.css"/>
        <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
    </head>
<script type="text/javascript">
    $(document).ready(function() {
        var goTo= new Array("2,5","1,3,6","2,4,7","3,8","1,6","2,5,7","3,7,8","4,7");
        var position= new Array("0,0","0,0,60","0,0,120","0,180","0,60","0,0,120","0,60,180","0,120");
        var here=8;
        var click=true;
        $(".box").click(function(){
            if(click==true){
                click=false;
                var id=$(this).attr("id");
                id=id.split("_");
                id=parseInt(id[1]);
                id--;
                var adjacents=goTo[id];
                adjacents=adjacents.split(",");
                var move=false;
                for(i in adjacents){
                    if(adjacents[i]==here){
                        move=true;
                    }
                }
                if(move==true){
                    var movePos=position[(here-1)];
                    alert(movePos);
                        movePos=movePos.split(",")
                    $(this).animate({top:movePos[0],left:movePos[1]},1000,function(){
                        $(this).attr("id","box_"+here);
                        here=id+1;
                        click=true;
                    })
                }
                else{
                    click=true;
                }
            }


        });

    });
</script>
    <body>
        <div id="container">

                <div id="box_1" class="box" style="background:yellow;top:0px;left:0px;">
                    1
                </div>
                <div id="box_2" class="box" style="background:red;top:0px;left:60px;">
                    2
                </div>
                <div id="box_3" class="box" style="background:magenta;display:block;top:0px;left:120px;">
                    3
                </div>

                <div id="box_4" class="box" style="background:brown;top:0px;left:180px;">
                    4
                </div>
                <div id="box_5" class="box" style=" background:orange;top:60px;left:0px;">
                    5
                </div>
                <div id="box_6" class="box" style="background:pink;top:60px;left:60px;">
                    6
                </div>
                <div id="box_7" class="box" style="background:green;top:60px;left:120px;">
                    7
                </div>

        </div>
    </body>
</html>

Answer 1

你可以继续在那个大div内创建相同数量的小div。并使其中一个小div透明。接下来点击那个透明的div附近的div 将单击的div的css更改为透明的div，反之亦然。使用jQuery交换css

使用jquery更改div的位置

1 个答案: