移動元素與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"); 
    }); 
});