Перемещение элементов между двумя div с помощью jQuery

Question

Я пытаюсь переместиться divs между двумя контейнерами (#one и #two). Я не могу понять, как выбрать div, который находится внутри другого div.

Я нашел похожую тему о таргетинге на класс внутри div. Это дало мне представление об использовании родителя.

jQuery имеет большой список селекторов , я полагаю, я мог бы использовать один из них. Но я интуитивно думаю, что мог бы использовать что-то вроде # one.draggable или какой-то другой способ указания пути.

Пример для JSFiddle

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') (пробел важен!), Чтобы выбрать все div с классом 'draggable' внутри div с идентификатором 'one'.

Таким образом, ваш полный код 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");
    });
});

UPDATE

Как вы заметили, с кодом выше невозможно переместить тот же 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");
    });
});