jQueryを利用しないでドラッグ・アンド・ドロップで並び替えを行う

ドラッグアンドドロップでの並び替えといえば、jQuery UIの Sortableがメジャーですが、こちらで公開されている「draggable_grid.js」というJavascriptライブラリを利用することで、jQueryなしでも動作させることができるようです。

ダウンロード：http://webos-goodies.jp/archives/draggable-grid-js.html

利用方法

CSSは自由に設定してください。

JavaScript

<script type="text/javascript" src="/js/draggable_grid-debug.js"></script>
<script type="text/javascript">
new DraggableGrid('sortableBlock', { scroll: true, fence: false, proxyStyle: 'background-color: #d2d2d2;cursor: move;' });
</script>

HTML

<div id="sortableBlock">
<div class="draggable"><i class="icon-reorder"></i> 木村 一郎</div>
<div class="draggable"><i class="icon-reorder"></i> 鈴木 太朗</div>
<div class="draggable"><i class="icon-reorder"></i> 田村 涼子</div>
<div class="draggable"><i class="icon-reorder"></i> 与世山 由美子</div>
</div>

また、こちらは残念ながらこちらはスマホには対応していないようです。