JQuery的可拖動的元素含量變化上放置

Question

我有一個項目列表看起來像這樣：

<div id="draggablearea"> 
    <ul> 
     <li><div class="title">Title 1</div> 
      <div class="content">Content 1. Probably a few hundred characters</div></li> 
     <li> ... </li> 
    </ul> 
</div> 

「內容」股利是不可見的，因爲我的CSS包括這樣的：

#content {display: none;} 

現在，我做了他們可拖動使用jQuery UI的：

$(function(){ 
    $("#draggablearea li").draggable(); 
    .... (setting up droppable stuff) 

到目前爲止，一切都很好：一切都出現在我拖動列表上，並移動到我的按預期投放區域。

現在，我想更改功能，以便在放置事件時，標題變得不可見，並且內容變得可見。

我已經試過這樣：

$("#droppableArea").droppable({ 
    accept: "#draggablearea li", 
    drop: function(event, ui){ 
     ui.draggable.children(".content").appendTo(this); 
    } 
}); 

但它不工作。什麼是正確的方法來做到這一點？

（整個li移動到當appendTo()被稱爲整個ui.draggable對象可投放區域。）

Answer 1

也許更像這樣？

$("#droppableArea").droppable({ 
    accept: "#draggablearea li", 
    drop: function(event, ui){ 
     ui.draggable.children(".title").hide(); 
     ui.draggable.children(".content").show(); 
    } 
}); 

Answer 2

我想你需要使內容可見。正如你所說的整個div被移動，所以這意味着內容div已經存在於doppablearea。通過將其顯示樣式設置爲阻止或內聯，您只需將其設置爲可見即可。

您將不得不嘗試類似下面的內容。

ui.draggable.children(".content").css("display", "block")