jQuery UI

要素の並べ替えとドラッグ&ドロップ●レイアウトを横並びにして、横に移動可能にしている

  $('ul#webtech').sortable({axis:'x'});

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

.ui-sortable{cursor:move;}
.ui-sortable-disabled{cursor:auto;}
.sortable-hover{background-color:red;}
ul#webtech{list-style-type:none;}
ul#webtech > li{display:inline;margin:5px;}


実行例 axisオプションは、要素の移動可能方向を表す。X軸は横のみ移動できる。

html
<ul id="webtech">
  <li>HTML</li>
  <li>CSS</li>
  <li>javaScript</li>
  <li>jQuery</li>
  <li>Wevサーバー</li>
</ul>

実行後のHTML