Packery

JavaScriptのライブラリ「Packery」で要素のドラッグ＆ドロップ

2022年9月12日 6分

ドラッグアンドドロップは、マウスの左ボタンを押したまま移動させたいものを移動先まで持っていき、マウスのボタンを離すことで、その要素を移動させることができます。

比較的モバイルよりは、デスクトップ向きのインタラクションなUIですが、直感的な操作が可能です。

今回は、そんなドラッグアンドドロップが実装可能なJavaScriptのライブラリ「Packery」の実装方法や、使い方について解説していきます。

JavaScriptのライブラリ「Packery」
「Packery」を使ったサンプル
実装の手順と方法
ざっくりとしたコードの解説
さいごに

JavaScriptのライブラリ「Packery」

「Packery」は、ドラッグ可能なレイアウトを作成するJavaScriptライブラリです。

ネイティブなJavaScriptライブラリで、要素を所定の位置にドラッグをして配置をして、要素の並び替えを行うことができます。

公式サイト Packery

かかかず

この記事では、この「Packery」を使ってドラッグ＆ドロップをしていきます。

「Packery」を使ったサンプル

早速「Packery」を使ったサンプルです。

正方形・長方形の要素が複数並んでいますが、各要素はドラッグすることができ、任意の場所にドロップして配置することができます。

…

かかかず

ドラッグして位置が変わる時、配置するエリアに点線も出ます。

このようなインタラクションなグリッドレイアウトを作れるのが、JavaScriptのライブラリ「Packery」です。

実装の手順と方法

サンプルで使用しているコードの解説の前に、Packeryのインストール方法や、実装手順についてです。

ここで大枠を掴んでおきましょう。

PackeryとDraggabillyの読み込み

Packeryのインストールは、ターミナルから行うnpmでのインストールや、CDNから読み込ませることで使用可能です。

この記事ではCDNでの利用方法で、以下のコードをHTMLの <head>〜</head> の中に記述しましょう。

コードを表示

<!-- Packery -->
<script src="https://unpkg.com/packery@2/dist/packery.pkgd.min.js"></script>
<!-- Draggabilly -->
<script src="https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js"></script>

HTMLを記述

設置したい場所へ、以下のHTMLタグを記述します。

コードを表示

<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item">...</div>
  <div class="grid-item grid-item--height2">...</div>
  <div class="grid-item">...</div>
  <div class="grid-item grid-item--width2">...</div>
  <div class="grid-item grid-item--height2">...</div>
  <div class="grid-item">...</div>
  <div class="grid-item">...</div>
  <div class="grid-item">...</div>
</div>

JavaScriptを記述

JavaScriptのコードを記述します。これは、Packeryの機能や各値を指定するオプションです。

コードは <body>〜</body>で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。

コードを表示

var pckry = new Packery( '.grid', {
  itemSelector: '.grid-item',
  columnWidth: 170
});

pckry.getItemElements().forEach( function( itemElem ) {
  var draggie = new Draggabilly( itemElem );
  // draggieの指定
  pckry.bindDraggabillyEvents( draggie );
});

CSSを記述

最後にCSSを記述して完了です。

コードを表示

/* grid全体 */
.grid {
    background: #eee;
    border: solid 2px #EEE;
}
/* 各アイテム */
.grid-item {
     width: 170px;
    height: 170px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFF;
    border: solid 2px #eee;
    cursor: grab;
}
/* 幅大きめのgrid */
.grid-item--width2 { 
     width: 340px;
    height: 170px;
 }
/* 高さ大きめのgrid */
.grid-item--height2 { 
     width: 170px;
    height: 340px;
 }
/* hover時 */
.grid-item:hover {
    opacity: 0.6;
}
/* drug時 */
.packery-drop-placeholder {
  outline: 3px dashed hsla(0, 0%, 0%, 0.5);
  cursor: grabbing;
  outline-offset: -6px;
  -webkit-transition: -webkit-transform 0.2s;
          transition: transform 0.2s;
}

ざっくりとしたコードの解説

コードは、HTML・JavaScript・CSSの3種類です。

HTMLは「CDNで読み込むPackeryとDraggabilly」と「グリッドのアイテム」の2種。そして、JavaScriptは「PackeryとDraggabillyの処理内容」と、CSSはレイアウト等に関する内容です。これら、順に解説していきます。

HTML

HTMLでは、まずはじめにPackeryとDraggabilly本体を読み込ませる必要があります。

前述の通りですが、ターミナルを使用してnpmでインストールすることも可能です。ですが、この記事ではCDNでのやり方で解説していきます。ので、以下のコードを<head>〜〜</head> の中に設置をしましょう。

<!-- Packery -->
<script src="https://unpkg.com/packery@2/dist/packery.pkgd.min.js"></script>
<!-- Draggabilly -->
<script src="https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js"></script>

本体読み込みの記述が完了したら、次に設置したい場所にHTMLの記述をします。

親要素には「grid」のclass名を付けて、子要素には「grid-item」のclass名を付けます。この2種はJavaScriptのコードと連動するので、子要素を増やす際には必ず「grid-item」を付与します。

<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item">...</div>
  <div class="grid-item grid-item--height2">...</div>
  <div class="grid-item">...</div>
  <div class="grid-item grid-item--width2">...</div>
  <div class="grid-item grid-item--height2">...</div>
  <div class="grid-item">...</div>
  <div class="grid-item">...</div>
  <div class="grid-item">...</div>
</div>

そして、長方形にする場合には「grid-item」のclass名を付与した要素に、「grid-item–width2」「grid-item–height2」のclass名を追加でつけることで、長方形にできます。

JavaScript

JavaScriptは、ライブラリのオプションを記述します。

var pckry = new Packery( '.grid', {
  itemSelector: '.grid-item',
  columnWidth: 170
});

pckry.getItemElements().forEach( function( itemElem ) {
  var draggie = new Draggabilly( itemElem );
  // draggieの指定
  pckry.bindDraggabillyEvents( draggie );
});

上記のコードではカラムの幅のみ指定していますが、要素同士の余白や高さなど細かく指定可能です。

詳しくは、以下公式サイトのオプションをご覧ください。

公式サイト Packeryのオプション

CSS

CSSで、全体のサイズ・レイアウトを整えていますが、グリッド一つ一つの大きさはPackeryのオプションで指定しているので、それに準じた width と height をCSSで記述していきます。

/* grid全体 */
.grid {
    background: #eee;
    border: solid 2px #EEE;
}
/* 各アイテム */
.grid-item {
     width: 170px;
    height: 170px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFF;
    border: solid 2px #eee;
    cursor: grab;
}
/* 幅大きめのgrid */
.grid-item--width2 { 
     width: 340px;
    height: 170px;
 }
/* 高さ大きめのgrid */
.grid-item--height2 { 
     width: 170px;
    height: 340px;
 }
/* hover時 */
.grid-item:hover {
    opacity: 0.6;
}
/* drug時 */
.packery-drop-placeholder {
  outline: 3px dashed hsla(0, 0%, 0%, 0.5);
  cursor: grabbing;
  outline-offset: -6px;
  -webkit-transition: -webkit-transform 0.2s;
          transition: transform 0.2s;
}