jQuery UI

要素の並べ替えとドラッグ＆ドロップ●子孫要素の<li>をすべて並べ替え可能にする

  $('ul#webtech').sortable({items:'li'});

CSS設定/下の2行で横並びに指定

ul#webtech, li.filter{list-style-type:none;}
ul#webtech > li{width:200px;}
li.filter{margin:0, padding:0; height:0; background-color:transparent;}
ul#webtech > li{margin:3px, padding:3px; border:1px dashed #000; background-color:#ffc;}
ul#webtech > li > ul >li{margin:5px, padding:5px; background-color:#9ff;}
.ui-sortable{cursor:move;}
.ui-sortable-disabled{cursor:default;}
.sortable-hover{cursor:move; background-color:eee;}

<ul id="webtech">
  <li>
    HTML
    <ul>
      <li>HTML 4.01</li>
      <li>XHTML 1.0</li>
      <li class="filter"></li>
    </ul>
  </li>
  <li>
    HTML
    <ul>
      <li>CSS2 4.01</li>
      <li>CSS3 1.0</li>
      <li class="filter"></li>
    </ul>
  </li>
  <li>
    HTML
    <ul>
      <li>Core</li>
      <li>Ajax</li>
      <li>UI</li>
      <li class="filter"></li>
    </ul>
  </li>
</ul>