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　自由な位置へ配置可能（ブラウザ幅小の場合には横スクロール表示）

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
*

Packery

https://packery.metafizzy.co/
https://packery.metafizzy.co/draggable.html#drop-placeholder
* Commercial license $25～
* オープンソースはGPL v3
* ブラウザ幅の変動により、X軸カラム数が変動（パタパタと改行）
* Draggabilly、jQuery UI DraggableのJSライブラリを使用可能
*

Muuri

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

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）

Angular Gridster

https://rawgit.com/ManifestWebDesign/angular-gridster/master/index.html#/dashboard
* Angularベース
* 幅が変わっても横に並ぶカラム数は固定
* 自由な場所に配置可能
* レスポンシブで画面サイズに合わせてカラムの幅が変わる。
* 狭くなったら１カラムレイアウトに変わる
*

Shapeshift

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

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

Freewall

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

 http://kombai.github.io/freewall/example/flex-grid.html
Windowスタイル（Windowsメトロのような）

http://kombai.github.io/freewall/example/metro-style.html
Imagesスタイル（google 画像検索のように、横に並ぶ）

http://kombai.github.io/freewall/example/image-layout.html
Pinterestスタイル（縦に並ぶ）

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

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

angular-widget-grid

https://github.com/patbuergin/angular-widget-grid
http://patbuergin.github.io/angular-widget-grid/
* ブラウザ全体をカラム数で割り、配置する。
* ブラウザ幅を超えて配置はできない。
* 自動でグリッド位置は変わらない
*

GridList

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

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

Dragable Grid Layoutを可能にするJS