移动元素与jQuery

Question

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

我发现了一个类似的topic约div内靶向类。它给了我使用父母的想法。

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

Example on 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中带有id'one'的可拖动类的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"); 
    }); 
}); 

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"); 
    }); 
});