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()使って下に移動させたりできる。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA