List（ul）をDrag & Dropで並び替える

List（ul）をDrag & Dropで並び替える:

Introduction

リストをDrag&Dropで並び替えたい！

「とりあえずブレスト」というプロダクトを作っているのですが、ブレインストーミングした結果のリストを並び替えて整理できたらいいなー、ということで実装してみました。一応Rails5.2を使っていますが、フロントエンドだけしかいじってないので何にも応用がきくと思います。

jQuery UIも検討しましたが、単独でスマホにも対応できるSotableを使ってみました。

動かしたいリストはこちら

/app/views/sample/sample.html.erb

<ul id="sortable_list"> 
  <li>item1</li> 
  <li>item2</li> 
  <li>item3</li> 
</ul> 

Sortableのインストール

こちらからSortable.min.jsをダウンロードして/app/assets/javascripts/に格納します。

GithubをみるとCDNも配布されているみたいなので、そちらから取得するのもありです。

リストをSortableにする

coffeescriptでちょろっと書くだけ。

/app/assets/javascripts/sample.coffee

$(document).on 'turbolinks:load', -> 
  el = document.getElementById("sortable_list") 
  sortable = Sortable.create(el) 

optionを指定する

Sortableは色々とオプションを指定できる。

指定の仕方は、

/app/assets/javascripts/sample.coffee

sortable = Sortable.create(el, { 
  animation: 150 
}) 

というかんじ。

Githubにデモ付きでoptionの詳細が書かれているので、気になるやつは使ってみよう。

Conclusion

jQuery UIのときはmobileでもDrag&Dropの並び替えをする上でちょっと壁があったのだけど、Sortableなら意識せずにmobile対応できるのでとても便利でした！

Reference

• ドラッグ＆ドロップで要素を並び替えることができるSortable.js
• Sortable