packery-angular

Installation

Installation is easy since packery-angular has minimal dependencies.

Requirements

This module requires the following libraries to be already installed:

Install using NPM

$ npm install packery-angular

Install using bower

$ bower install packery-angular

Import the necessary files

Add the necessary scripts to your HTML page.

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <!-- Include the necessary libraries -->
        <script src="js/angular.min.js"></script>
        <script src="js/draggabilly.pkgd.min.js"></script>
        <script src="js/packery.pkgd.min.js"></script>
        <!-- Include the packery-angular script -->
        <script src="js/packery-angular.min.js"></script>
    </head>
</html>

Inject the module to your project

When all of the dependencies are installed, inject this module to the list of dependencies of your application.

angular.module('app', ['packery-angular']);

Usage

This module exposes a couple of directives to simplify the usage of the Packery instance.

HTML

<pa-packery pa-options="options">
    <pa-packery-item class="pa-item">Sample item 1</pa-packery-item>
    <pa-packery-item class="pa-item">Sample item 2</pa-packery-item>
    <pa-packery-item class="pa-item">Sample item 3</pa-packery-item>
</pa-packery>

JavaScript

$scope.options = {
    columnWidth: 1,
    dragSelector: '',
    isAppended: true,
    isDraggable: true,
    itemSelector: '.pa-item',
    rowHeight: 1,
    stamp: '.pa-stamp'
};

Changelog

Please check the CHANGELOG.md for the list of changes.

Contributing

I am open for modifications on this project. Please check the CONTRIBUTING.md for the contribution guidelines.

License

This repository is open source and distributed under the MIT License.

Packery is a product of Metafizzy LLC and is distributed under a separate license. Please refer to their website for information on Packery’s license.