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 "content" не виден, потому что мой 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.Вам просто нужно, чтобы он был виден, установив его стиль отображения как блокирующий или встроенный.

Вам нужно будет попробовать что-то вроде следующего.