アコーディオン要素をソート可能かつドラッグ可能にする方法

ドラッグ可能/ドロップ可能なアイテムを開発するためのパターンがあります。主な問題は、ドラッグ可能な要素は、それらを配置する場所にいくつかのような視覚的なフィードバックを提供アコーディオンなしでは何アコーディオン要素をソート可能かつドラッグ可能にする方法

<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がある

として階層は次の通りです。（これらの要素：

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

<div class="childs"> 
）の構造をアコーディオンする場合ながら適用されるフィードバックは、単にドラッグ可能要素のULの範囲内です。私はSortable領域にドロップすることができます。私は彼らにアコーディオンなしで行うフィードバックを提供する必要があります。

出典

2012-03-29 HardCode