JQuery와 아코디언은 드래그 앤 드롭되는

나는 다음과 같은 HTML 논리 블록이 있습니다JQuery와 아코디언은 드래그 앤 드롭되는

첫 번째는 정렬 아코디언 목록
두 번째 드래그 아코디언의 목록 입니다을 . 이러한 요소는 정렬 가능한 아코디언에 추가 할 수 있습니다. 여기

그래서 나는 정렬 아코디언에 추가하기 위해 내 드래그 할 수있는 요소를 이동하고 싶습니다. 정렬 가능한 아코디언 중에서 요소를 놓을 때 열 수 없다는 점을 제외하고는 정상적으로 작동합니다. 여기

내 자바 스크립트 코드 :

$(function() { 
$("> div", "#questionsDispos").draggable({ 
    helper: "clone", 
    revert: "invalid", 
    cursor: "move", 
    handle: "h3", 
    connectToSortable: ".questions" 
}); 

$(".questions").accordion({ 
    header: "> div > h3", 
    collapsible: true, 
    active: false, 
    autoHeight: false 
}).sortable({ 
    handle: "h3", 
    receive: function(event, ui) { 
     $(ui.item).removeClass(); 
     $(ui.item).removeAttr("style"); 
    } 
}); 

$("#questionsDispos").accordion({ 
    header: "> div > h3", 
    collapsible: true, 
    active: false, 
    autoHeight: false 
}); 
});

그리고 여기 내 HTML입니다 :

<div class="questions"> 
    <div> 
     <h3><a href="#">Question 1. My First Question ?</a></h3> 
     <div> 
      First content<br /> 
     </div> 
    </div> 

    <div> 
     <h3><a href="#">Question 2. My Second Question ?</a></h3> 
     <div> 
      Second content<br /> 
     </div> 
    </div> 

    <div> 
     <h3><a href="#">Question 3. My Third Question ?</a></h3> 
     <div> 
      Third content<br /> 
     </div> 
    </div> 
</div> 

Questions disponibles :<br /> 
<div id="questionsDispos"> 
    <div> 
     <h3><a href="#">Something</a></h3> 
     <div> 
      My Content Here<br /> 
     </div> 
    </div> 
</div>

나는 JQuery와 - UI를-1.8.11.custom.min의 패치 버전을 사용하는 것이 유의하시기 바랍니다 .patch.js를 사용하여 sortable의 receive 이벤트에서 ui.item을 사용하십시오. (이동 된 요소를 다른 요소처럼 보이게 만들기 위해 일부 클래스를 제거하는 데이 클래스를 사용합니다.) 당신은 여기에서 다운로드 할 수 있습니다 http://www.toofiles.com/fr/oip/documents/js/jquery-ui-1811customminpatch.html

편집 : 당신이 그것을 테스트 할 수 있도록 내가 여기 데모를 게시 : http://jsfiddle.net/t3tVA/ 당신이 상단에있는 아코디언 사이에 "뭔가"를 삭제할 때 당신이 볼 수 있듯이, 그것은 열 수 없습니다 더 이상

누군가 해결책이 있습니까? 감사합니다.

출처

2011-04-22 Romain Guidoux