아코디언을 연결된 정렬 가능 목록과 결합하는 방법

Question

아코디언 섹션 안에 jquery-ui 정렬 가능 목록을 넣고 연결하려고합니다. 아이디어는 몇 가지 카테고리로 항목을 정렬하기위한 작고 직관적 인 인터페이스를 만드는 것입니다. 항목은 일반적으로 한 섹션 내에서 정렬되지만 때로는 다른 아코디언 섹션으로 분류 될 수 있습니다.

거의이 입니다 :

<div id="accordion"> 
    <h3 class="accordion-header"><a href="#">good</a></h3> 
    <div class="accordion-section"> 
     <ul class="sortable-list"> 
      <li>dog</li> 
      <li>butter</li> 
     </ul> 
    </div> 
    ... 
</div> 

그리고 자바 스크립트 :

// Setup the accordion 
$("#accordion").accordion(); 
var $accordion = $("#accordion").accordion(); 

//Setup the sortable list 
$("ul.sortable-list").sortable({ 
    connectWith: "ul.sortable-list", // connect all sortable lists together so items can be dragged from one list to aother 
    stop: function(event, ui) { 
     console.log("an item was moved"); 
    } 
}).disableSelection(); 

$("h3.accordion-header").droppable({ 
    over: function(event, ui) { 
     //it would be ideal to have some sort of tollorance or delay so user does not accidentally expand another section or accordion 
     $(this).css('color', 'red'); 
     $accordion.accordion('activate', $(this)); 
    }, 
    out: function(event, ui) { 
     $(this).css('color', 'green'); 
    } 
}); 

부분 아직 작동하지 않습니다 여기에

http://jsfiddle.net/arasbm/H5MRw/7/는 HTML 코드의 샘플입니다 항목이 목록에서 다른 목록으로 드래그되는 동안 사용자에게 올바른 시각적 피드백을 보여줍니다. 사용자가 다른 아코디언 섹션의 머리글 위에 항목을 드래그하면 해당 섹션이 활성화되지만 어떤 이유로 드래그하는 동안 사용 된 요소가 사라집니다. 항목이 실제로 계속 표시되어 목록에 놓으면 자리 표시자가 나타나고 항목을 새 위치로 드롭 할 수 있습니다. 그들은 아코디언의 다른 섹션에 갈 때 사용자가 그들도 드래그하는 항목을 볼 수 있도록

어떻게이 구현을 해결할 수 있습니다. 이 문제를 해결하는 데 도움을 주셔서 감사하지만, 솔루션을 시연하기 위해 제공 한 the jsFiddle을 사용하십시오.

Answer 1

실제로 문제는 드래그 된 요소가 div accordion-section에 속하는 것입니다. 다른 섹션을 가리키면 현재 div가 드래그 된 요소로 숨겨집니다.

그래서 당신은 드래그 된 요소를 저장하는 ul temporary를 만들 수 있습니다 문제를 해결합니다. 이 ul은 끌기 이벤트가 끝날 때 제거됩니다.

자바 스크립트 :이

// Setup the accordion 
//$("#accordion").accordion(); 
var $accordion = $("#accordion").accordion(); 

//Setup the sortable list 
$("ul.sortable-list").sortable({ 
    connectWith: "ul.sortable-list", // connect all sortable lists together so items can be dragged from one list to aother 
    stop: function(event, ui) { 
     console.log("an item was moved"); 
     $accordion.find("#tmp").remove(); 
    }, 
    start: function(event, ui){ 
     $accordion.append("<ul id='tmp'></ul>"); 
     $accordion.find("#tmp").append(ui.item); 
    } 
}).disableSelection(); 

$("h3.accordion-header").droppable({ 
    over: function(event, ui) { 
     //it would be ideal to have some sort of tollorance or delay so user does not accidentally expand another section or accordion 
     $(this).css('color', 'red'); 
     $accordion.accordion('activate', $(this)); 
    }, 
    out: function(event, ui) { 
     $(this).css('color', 'green'); 
    } 
}); 

Here 바이올린 예를있다. 이 코드가 도움이 되었기를 바랍니다. 드래그 된 요소를 이동해야한다고 주장하는 이유를 모르겠습니다.