[Javascript]SortableJSの使い方を試す。



今日は、SortableJSってのを試してみたいと思います。

1.SortableJSってなんじゃい。

jQueryに依存しないJavascriptライブラリです。
jQuery-uiなんかにもsortableってのがあったと思うけど、最近は脱jQueryというのも流行りだそうなので、せっかっくだしjQueryに依存しないライブラリを試してみようと思った訳です。
名前の通り、並べ替え可能なドラッグアンドドロップリストが簡単にできるようになるよってやつだそうです。
(一応、IE9にも対応してるって、優しいね。😳)

本家はこちら。 GitHub – SortableJS

2.さっそくロードして試していく。。。

んじゃ、さっそくコード書いて試していくよー
まず、一番プレーンなやつね。

HTML

Javascript

実装
  • これで、並べ替えができる
  • 様になっている
  • はずなんだ。
3.ではでは、オプション試してみよー

この、Sortable.createの第二引数に連想配列でいろいろ渡すとオプション機能が使えるみたいよー
ちょっとヌルヌルさせてみる。

Javascript

実装
  • すこしぬるっと入れ替わる。
  • easing使ってぼよよんしてみたかったけど
  • なんか他にプラグイン必要っぽいんだ。

このままだと、テキストのラベル選択ができなくてドラッグ=移動になってやだなーって時はハンドル付けれるみたい。

HTML

Javascript

  •  ラベル選択できる?
  •  ←ここ選択して並べ変えできるよ。
  •  ラベル選択できないなんてヤダ。
4.ほいじゃー最後にVue.jsと組み合わせつつイベントとか見てこう。

セット!オン!! ジャキーン😎

 HTML

Javascript

 

実装
  • LIST:1
  • LIST:2
  • LIST:3
最後に発生したイベントは・・・{{ eventname }}

{{ sortlist }}

ふむふむ、toArray()で最終的な並び順を取得するときにはdata-idっていう属性値で返ってくるようになるみたいだね🤔

 

コメントを残す

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