jQueryUI:sortableを使う

goto_jp 198views 更新:2015年3月4日

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 // ドロップした要素がアニメーションしてリストに戻るようにする
  });
});

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません