塩焼きブログ

塩焼きに関しての研究内容を公開しています

jQueryで上に移動とか下に移動とかリストの並び替えをする

こういうリストがあったとして並び替えなんてとてつもなく難しそうに思えるかもしれないけど、じつはすごい簡単だから説明してあげる♡

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

こういう感じ。全てのliを回していって全部にclickイベントを付与する。それぞれのliはクリックしたら自分自身の隣の要素を取得して、隣の要素の手前に自分自身を追加する。こうするとコピーとかされるわけではなくて移動されるというわけ。

$('ul li').each(function() {
  $(this).click(function() {
    $(this).prev().before(this);
  });
});

これを実行するとliをクリックすると上の要素の上に移動する。うまい具合にトリガーを設置していけば、上矢印ボタンとかで上に移動させたり、next()使って下に移動させたりできる。