Accordian Elements를 정렬 및 드래그 가능하게 만드는 방법

나는 드래그 가능/드롭 가능 항목 개발을위한 패턴이 있습니다. 주요 문제는 드래그 가능한 요소를 배치하는 위치에 같은 시각적 피드백을 제공하는 아코디언없이 무엇Accordian Elements를 정렬 및 드래그 가능하게 만드는 방법

<ul id="Menu"> 
<li> 
    <span class="head">Input</span> 
    <div class="childs"> 
     <ul>  
     <li class="draggable"> 
      <input type="checkbox"/> 
     </li> 
     <li class="draggable"> 
      <input type="radio"/> 
     </li>  
     </ul> 
    </div> 

    <span class="head">Controls</span> 
    <div class="childs"> 
     <ul>  
     <li class="draggable"> 
      <input type="file"/> 
     </li> 
     <li class="draggable"> 
      <input type="button"/> 
     </li>  
     </ul> 
    </div> 
</li> 
</ul> 



<ul class="sortable"> 
<li> Drag elements Here.</li> 
</ul>

을 다음과 같이 대한 HTML은

<script type="text/javascript"> 
$(function() { 
     $("#Menu").accordion({ 
      autoHeight: false, 
      navigation: true, 
      collapsible: true 
     }); 
     $(".sortable").sortable({ 
       revert: false, 
       start: function(e, ui) { 
        draggedItem = ui.item; 
       } 
     });  
     $(".draggable").draggable({ 
      helper: "clone", 
      connectToSortable: ".sortable",   
      revert: "true" 
     }); 
}); 
</script>

으로 계층 구조는 다음과 같다. (이러한 요소 :

<span class="head">Controls</span> 

<div class="childs"> 
)을 구조 아코디언 때시키면서 적용되는 피드백은 드래그 소자의 UL 내에있다. Sortable 영역에 드롭 할 수 있습니다. 나는 그들에게 accordian 없이는 피드백을 제공 할 필요가있다. ...

출처

2012-03-29 HardCode