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

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 // ミリ秒で指定
});
オプションでアニメーションをつけることができます。
他にもあるオプション
他にもグループ機能やソート、スクロール対応など豊富なオプションがあるのでとても便利だと思います。ブラウザもIE9+でタッチデバイスにも対応しています。
CSS本執筆しました!!!
CSS本出します!1/29発売予定
— たかもそ@CSS本1/29発売!! (@takamosoo) 2018年12月31日
自分がCSS学びたての頃にもっとはやく知りたかったテクニックを載せています。CSSの基礎知識について解説していないので、中級者〜向けとなります。CSS入門書を読んではみたものの、思い通りに作れない人にオススメです。
よろしくお願いします。https://t.co/fkz1dM03Pj pic.twitter.com/suYyaPqwIs