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>

“内容”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);
    }
});

但是它不起作用。正确的做法是什么？

(当对整个 ui.draggable 对象调用 appendTo() 时，整个 li 会移动到可放置区域。)

Answer 1

也许更像这样？

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