Question

我有下面的代码，我想知道如何动态地将div移动到另一个？我的想法是创造一个生活统治者，每年将成为统治者的一个地方。

<!DOCTYPE html>
<html lang='pt-BR'>
<head>
    <title>Ruler</title>
    <style>
        .rule{
            height: 40px;
            position: relative;
            width: 100%;
        }
        .unit {
            position: absolute;
            bottom: 0; 
            border-left: 2px solid black;
            border-right: 2px solid black;
            border-bottom: 2px solid black;
            height: 15px;
            width: 16px;
            padding-top: calc(100%-15px);
            float: left;
        }

        .box {
            position: absolute;
            background-color: yellow;
            border: 2px solid black;
            height: 30px;
            width: 10px;
            left: 1px;
            top: -20px;
        }
    </style>
</head>
<body>
    <div class="rule">
        <div id="d1" style="left: 0px" class="unit"><div class="box"></div></div>
        <div id="d2" style="left: 18px" class="unit"></div>
        <div id="d3" style="left: 36px" class="unit"></div>
        <div id="d4" style="left: 54px" class="unit"></div>
        <div id="d5" style="left: 72px" class="unit"></div>
    </div>



    <input type="button" id="back" value="<<"/>
    <input type="button" id="forward" value=">>"/>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
        $(function(){
            $("#forward").click(function(){
                    $(".box").parent().next().html($(".box"));
            });
            $("#back").click(function(){
                    $(".box").parent().prev().html($(".box"));
            });

        });
    </script>
</body>

我试过了：

if(Math.abs(parseFloat($(".box").css("margin-left"))) < (11 + 18 * 3)){ 
  $(".box").animate({"marginLeft":"+=18px"});
}

但是，我不知道它是哪个div。

感谢。

Answer 1

在div之外移动div类“box”。

<div class="rule">
    <div class="box"></div>
    <div id="d1" style="left: 0px" class="unit"></div>
    <div id="d2" style="left: 18px" class="unit"></div>
    <div id="d3" style="left: 36px" class="unit"></div>
    <div id="d4" style="left: 54px" class="unit"></div>
    <div id="d5" style="left: 72px" class="unit"></div>
</div>

然后应用这些样式

.rule{
        height: 40px;
        position: relative;
        width: 100%;
    }
    .unit {
        position: absolute;
        bottom: 0; 
        border-left: 2px solid black;
        border-right: 2px solid black;
        border-bottom: 2px solid black;
        height: 15px;
        width: 16px;
        padding-top: calc(100%-15px);
        float: left;
    }

    .box {
        position: absolute;
        background-color: yellow;
        border: 2px solid black;
        height: 30px;
        width: 10px;
        left: 3px;
        bottom: -0px;
    }

然后你的javascript就可以了：

$('.box').click(function() {
    var $box = $(this);

    $box.animate({"marginLeft":"+=18px"});
});

看到这个小提琴：http://jsfiddle.net/3K5mw/

这是找到你的div参考的最后小提琴：http://jsfiddle.net/3K5mw/2/

如何动态地将div移动到另一个div

1 个答案: