ドラッグ＆ドロップで要素を並び替える機能を作る必要があったのですが、jQuery UIは使いたくなかったので代替ライブラリを探していると使いやすいライブラリを見つけたので紹介します。基本的にはHTML5 Drag & Drop APIを使っているのですが、古いブラウザ向けにオプションでフォールバック対応することもできます。

導入

ダウンロード

• Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. | GitHub

Download ZIPからダウンロードします。

読み込み

<script src="Sortable.min.js"></script>

ダウンロードしたJSを読み込みます。

基本的な使い方

リストの項目をドラッグで順序を並び替えることができます。

<div class="list">
  <div class="item">First</div>
  <div class="item">Second</div>
  <div class="item">Third</div>
  <div class="item">Fourth</div>
</div>

.item {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

$(function() {

Sortable.create($('.list')[0]);

});

Sortable.create() で要素を指定します。jQueryを使っていますが、jQuery依存ではないのでわざわざjQueryを使う必要はありません。

選択した要素にCSS適用

.sortable-chosen {
  color: #fff;
  background-color: #edb54c;
}

選択したものにはクラス名が付与されるので、スタイルを変更することができます。オプションでクラス名を変更することもできます。

アニメーション

Sortable.create($('.list')[0], {
  animation: 110  // ミリ秒で指定
});

オプションでアニメーションをつけることができます。

他にもあるオプション

• Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. | GitHub

他にもグループ機能やソート、スクロール対応など豊富なオプションがあるのでとても便利だと思います。ブラウザもIE9+でタッチデバイスにも対応しています。