jQueryUI:sortableを使う

See the Pen jQuery sortable by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

ドラッグ＆ドロップで並び替えできるリストです。

<ul class="sortable-menu">
  <li></li>
  ～
</ul>

上記のようなHTMLの場合。

jQuery及びjQueryUIを読み込み、ソートしたいリストのクラスへ「sortable()」を使うのみ。

$(function() {
  $(".sortable-menu").sortable();
});

サンプルには下記のようなオプションを加えています。

$(function() {
  $(".sortable-menu").sortable({
    axis: "y", // 縦方向にしかドラッグ＆ドロップできなくする
    revert: true // ドロップした要素がアニメーションしてリストに戻るようにする
  });
});