JQuery와 드래그 가능한 요소 변경에 I는 다음과 같이 항목의 목록을

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

을 지금까지

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

너무 좋은 : 나는 JQuery와 - UI를 사용하여 드래그했습니다 모든 것이 내 드래그 목록에 게재하고,에 이동 내 예상대로 droppable 영역.

이제 드롭 이벤트에서 제목이 보이지 않게되고 내용이 표시되도록 기능을 변경하려고합니다.

$("#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가 이미 doppablearea에 있음을 의미하므로 전체 div가 이동되었다고 했으므로 표시 스타일을 블록 또는 인라인으로 설정하여 표시해야합니다.

다음과 같이 시도해야합니다.

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