Question

我正在尝试在两个容器（ divs 和 #one ）之间移动#two。我似乎无法弄清楚如何选择另一个div内的div。

我在div内找到了类似topic关于定位类的内容。它让我想到了使用父母。

jQuery有 a large list of selectors，我想我可以使用其中一个。但我直觉地认为我可以使用＃one.draggable或其他类型的指定路径。

CSS：

div
{
    display:inline;
    background-color:#eee;
}

.draggable
{
    width: 50px;
    height: 50px;
    background-color: lime;
    z-index: 2;
    display: block;
    float: left;
    background-color: #333333;
}

#one
{
    width: 200px;
    height: 200px;
    background-color: #555555;
    z-index: 1;
    float: left;
}

#two
{
    width: 200px;
    height: 200px;
    background-color: #777777;
    z-index: 1;
    float: left;
}

jQuery的：

$(document).ready(function() {
    $(".draggable",$(this).parent("one")).click(function () { 
        // move from "one" to "two"
        $(this).appendTo("#two");
    });

    $(".draggable",$(this).parent("two")).click(function () { 
        // move from "two" to "one"
        $(this).appendTo("#one");
    });
});

HTML：

<div id="one">
    <div class="draggable">1</div>
    <div class="draggable">2</div>
    <div class="draggable">3</div>
</div>

<div id="two">
    <div class="draggable">4</div>
    <div class="draggable">5</div>
    <div class="draggable">6</div>
</div>

Answer 1

我会尝试坚持你的问题的核心：使用$('#one .draggable')（空间很重要！）来选择id为'one'的div中带有'draggable'类的所有div

所以你的完整jQuery代码应该是：

$(document).ready(function() {
    $('#one .draggable').click(function () { 
        // move from "one" to "two"
        $(this).appendTo("#two");
    });

    $('#two .draggable').click(function () { 
        // move from "two" to "one"
        $(this).appendTo("#one");
    });
});

<强>更新

正如您所注意到的，使用上面的代码，在第一次移动后无法再次移动相同的div。解决方案如下：

$(document).ready(function() {
    $('#one .draggable').live('click', function () { 
        // move from "one" to "two"
        $(this).appendTo("#two");
    });

    $('#two .draggable').live('click', function () { 
        // move from "two" to "one"
        $(this).appendTo("#one");
    });
});

使用jQuery在2 div之间移动元素

1 个答案: