Dragable Grid Layoutを可能にするJS


2017.8.31 記入・調査した内容です


Githubでの検索結果順
スター順
https://github.com/search?o=desc&q=grid+layouts+drag&s=forks&type=Repositories&utf8=%E2%9C%93


## Gridster
オリジナル：https://github.com/ducksboard/gridster.js
フォーク(dustmoo)：https://github.com/dustmoo/gridster.js
フォーク(dsmorse)：https://github.com/dsmorse/gridster.js
デモ：http://dsmorse.github.io/gridster.js/#demos

* 領域は固定、もしくは画面に合わせて変動
　https://strml.github.io/react-grid-layout/examples/0-showcase.html
* 固定の場合には画面サイズ小では横スクロール表示
* 変動の場合には画面サイズに合わせてグリッドカラム幅が変動
* マルチ表示可能だが、それぞれでアイテムをドロップできない
* リサイズ機能：有り
* Stich　自由な位置へ配置可能（ブラウザ幅小の場合には横スクロール表示）

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/11bba7f1-0411-cb77-8218-67f7dc7ca77e.png)



## React-Grid-Layout
https://github.com/STRML/react-grid-layout
* Packery or Gridsterをリスペクトして作成
  gridsterはdsmorse版の方
* Reactベース
* レスポンシブに対応
* ブラウザ幅に合わせて、改行かカラム幅変動かが選べる
* サイズ・位置固定のカラムを混ぜることも可能　https://strml.github.io/react-grid-layout/examples/5-static-elements.html
* ローカルストレージ保存
* 画面サイズ毎に配置を自動保存　https://strml.github.io/react-grid-layout/examples/8-localstorage-responsive.html
* 

https://www.bitmex.com/app/trade/XBTUSD

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/e5720e8f-4687-7afa-526f-60904b123874.png)




## Packery
https://packery.metafizzy.co/
https://packery.metafizzy.co/draggable.html#drop-placeholder
* Commercial license $25～
* オープンソースはGPL v3
* ブラウザ幅の変動により、X軸カラム数が変動（パタパタと改行）
* Draggabilly、jQuery UI DraggableのJSライブラリを使用可能
* 
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/12c3f521-a68d-d1c8-95b4-898ec0d93408.png)



## Muuri
https://haltu.github.io/muuri/
* Drag&Dropで配置を変更
* 自由な場所にはおけない（配置は変更可能）
* ブラウザ幅の変動により、X軸カラム数が変動（パタパタと改行）
* 看板レイアウトもある。

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/404d691a-6d61-d3d2-3575-50ab67a1fadc.png)

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/06ce86ed-cc85-9bb2-590a-08701843c825.png)


## vue-grid-layout
* React-Grid-Layoutから影響を受けて作成
* Vueベース
https://github.com/jbaysolutions/vue-grid-layout


## the-grid
https://github.com/vpusher/the-grid
デモ：https://www.webcomponents.org/element/vpusher/the-grid/demo/demo/index.html

Polymer 2.0.ベースです。

デモの方法
Githubからリポジトリをダウンロードし、commandで以下を実行する
```bash
bower install
polymer serve -o
```
ブラウザが起動したら以下へアクセス
http://127.0.0.1:8081/components/the-grid/demo/

デモを試したみた感じでは、
* タイル表示
* ドラッグ＆ドロップ（ただし空き領域にのみドロップ可能）
* リサイズ（ただし空き領域にのみリサイズ可能）
* 自動でレイアウト調整機能は無さそう
* 絵文字利用可能（絵文字Grid）
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/f30af3e7-29b0-8726-a5a4-aadf12043cc8.png)



# Angular Gridster
https://rawgit.com/ManifestWebDesign/angular-gridster/master/index.html#/dashboard
* Angularベース
* 幅が変わっても横に並ぶカラム数は固定
* 自由な場所に配置可能
* レスポンシブで画面サイズに合わせてカラムの幅が変わる。
* 狭くなったら１カラムレイアウトに変わる
* 
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/e5b414d5-e9b6-c45a-09a6-dbca26e9ece3.png)

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/8ecfbfad-34f0-0ed6-5e05-41b6e0badb06.png)


# Shapeshift
https://github.com/McPants/jquery.shapeshift
http://mcpants.github.io/jquery.shapeshift/

* レスポンシブに対応
* ブラウザ幅に合わせて、改行かカラム幅変動かが選べる
* アイテム単位でのリサイズ機能が無い
* 最後の更新が2014年で止まっている

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/9a8f09dd-8c6d-a452-8e68-d41c2790efb1.png)


# Freewall

* スタイルが選べるのが特徴
* 表示する機器に合わせて表示も変わる
* ブラウザ幅に合わせてコンテンツ列が動的に変わる
* アイテム単位でのリサイズ機能が無い
Drag
http://kombai.github.io/freewall/example/draggable.html

* Frexスタイル
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/bd7fe544-e257-8ffd-319a-2fe9a08e716e.png)
http://kombai.github.io/freewall/example/flex-grid.html
* Windowスタイル（Windowsメトロのような）
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/5f484e8a-20a2-4567-f79b-0b1689332f51.png)
http://kombai.github.io/freewall/example/metro-style.html

* Imagesスタイル（google 画像検索のように、横に並ぶ）
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/b4f04d81-2936-6cf4-c3c7-f73ee34a0029.png)
http://kombai.github.io/freewall/example/image-layout.html

* Pinterestスタイル（縦に並ぶ）
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/77e8cbd0-0e2f-543b-ffc6-d7270fd4ba4e.png)
http://kombai.github.io/freewall/example/pinterest-layout.html

* Grid（真四角）レイアウト
http://kombai.github.io/freewall/example/grid-layout.html
 

# Gridstack
https://github.com/troolee/gridstack.js
http://troolee.github.io/gridstack.js/demo/

Gridsterのインスピレーションを受けたGridstack

* リサイズ可能
* 自由な場所に配置可能
* レスポンシブで画面サイズに合わせてカラムの幅が変わる。
* 狭くなったら１カラムレイアウトに変わる
* 削除イベントがある。
* マルチ機能あり。グリッド→グリッドへドロップ可能

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/f0cef126-b9d8-dd46-c7ff-871d3c8954ce.png)
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/9b065f20-89e1-7fd2-ae47-31b99892db0f.png)



# angular-widget-grid
https://github.com/patbuergin/angular-widget-grid
http://patbuergin.github.io/angular-widget-grid/
* ブラウザ全体をカラム数で割り、配置する。
* ブラウザ幅を超えて配置はできない。
* 自動でグリッド位置は変わらない
* 
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/b5ee0fe9-fe72-e643-3e29-5c68ff83d4df.png)


#GridList
https://github.com/hootsuite/grid
http://hootsuite.github.io/grid/

* +とーで拡大縮小できるのが特色