jQuery UI

要素の並べ替えとドラッグ＆ドロップ●複数の領域間で要素を移動させる

  $('#webtech').sortable({connectWith:['#equipment','#contents']});
  $('#equipment').sortable({connectWith:['#webtech','#contents']});
  $('#contents').sortable({connectWith:['#webtech','#equipment']});

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</li>
  <li>CSS</li>
  <li>javascript</li>
  <li>jQuery</li>
  <li>Webサーバー</li>
<ul>
<ul id="equipment">
  <li>ディスプレイ</li>
  <li>キーボード</li>
  <li>マウス</li>
  <li>ハードディスク</li>
  <li>マルチドライブ</li>
<ul>
<ul id="contents">
  <li>ポータブル</li>
  <li>ブログ</li>
  <li>CNS</li>
  <li>投稿サイト</li>
  <li>掲示板</li>
<ul>