ドラッグ、ソートが可能なレスポンシブ対応のMasonryレイアウト「Muuri」

2017/03/13

こんにちは。
今回はドラッグ、ソートが可能なレスポンシブ対応のMasonryレイアウト「Muuri」です。

ソートやフィルタ、要素をドラッグ&ドロップで移動可能なレスポンシブ対応のレンガレイアウトを実装できるスクリプトを紹介します。

ドラッグ、ソートが可能なレスポンシブ対応のMasonryレイアウト「Muuri」

Muuri

muuri

 

Muuriをダウンロードしてみよう!

https://github.com/haltu/muuriにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。

 

Muuriを設置してみよう!

先程ダウンロードしたmuuri.jsの他にもvelocity.jsとhammer.jsも/bodyの手前に読み込みます。

[html]



[/html]

 

その下に下記のスクリプトを記述し、スクリプトを初期化して実行します。

[javascript]
var grid = new Muuri({
container: document.getElementsByClassName(‘grid’)[0],
items: [].slice.call(document.getElementsByClassName(‘item’))
});
[/javascript]

 

html部分を記述します。
グリッドはdiv要素で実装しますよ。

[html]

This can be anything.

Yippee!

[/html]

 

最後にスタイルシートを記述しますよ。

[css]
.grid {
position: relative;
}
.item {
display: block;
position: absolute;
width: 100px;
height: 100px;
margin: 5px;
z-index: 1;
}
.item.muuri-dragging,
.item.muuri-releasing {
z-index: 2;
}
.item.muuri-hidden {
z-index: 0;
}
.item-content {
position: relative;
width: 100%;
height: 100%;
}
[/css]

 

JavaScriptの理解を深めた人がさらにもう一歩先に進むための本
JavaScriptの理解を深めた人がさらにもう一歩先に進むための本

 

移動時のアニメーションも面白いですね。
以上でドラッグ、ソートが可能なレスポンシブ対応のMasonryレイアウト「Muuri」でした。

この記事を読んだ人はこんな記事も読んでいますよ