draggabilly vs gridstack vs isotope-layout vs masonry-layout vs muuri vs packery
JavaScript Layout and Drag-and-Drop Libraries
Search packages..
draggabillygridstackisotope-layoutmasonry-layoutmuuripackerySimilar Packages:

JavaScript Layout and Drag-and-Drop Libraries

These libraries provide functionalities for creating dynamic layouts and enabling drag-and-drop interactions in web applications. They help developers build responsive and interactive user interfaces by allowing elements to be rearranged, resized, or moved within a grid or layout. Each library has its unique features and use cases, catering to different needs in web development, such as grid management, item positioning, and layout responsiveness.

Npm Package Weekly Downloads Trend

3 Years

Github Stars Ranking

Stat Detail

Package
Downloads
Stars
Size
Issues
Publish
License
draggabilly03,87683.6 kB18-MIT
gridstack08,7531.89 MB673 months agoMIT
isotope-layout011,103-768 years agoGPL-3.0
masonry-layout016,704-858 years agoMIT
muuri010,9681 MB117-MIT
packery04,307260 kB55a year agoMIT

Feature Comparison: draggabilly vs gridstack vs isotope-layout vs masonry-layout vs muuri vs packery

Drag-and-Drop Functionality

  • draggabilly:

    Draggabilly provides a straightforward drag-and-drop API that allows elements to be moved around the page. It is lightweight and does not impose any layout structure, making it easy to integrate into existing designs without heavy dependencies.

  • gridstack:

    Gridstack offers built-in drag-and-drop capabilities for grid items, allowing users to rearrange widgets easily. It also supports resizing, making it ideal for dashboard applications where users can customize their layouts.

  • isotope-layout:

    Isotope includes drag-and-drop support alongside its filtering and sorting features, allowing users to rearrange items dynamically. This makes it suitable for interactive galleries where users can customize the display of items.

  • masonry-layout:

    Masonry Layout does not natively support drag-and-drop, but it can be combined with other libraries to achieve this functionality. It focuses primarily on arranging items in a masonry style, making it less flexible for drag-and-drop interactions.

  • muuri:

    Muuri provides comprehensive drag-and-drop functionality, allowing items to be moved, sorted, and filtered easily. It is designed for high performance and supports complex interactions, making it suitable for dynamic applications.

  • packery:

    Packery supports drag-and-drop functionality, allowing users to rearrange items within a grid layout. It focuses on filling gaps efficiently while maintaining a fluid layout, making it a good choice for visually dynamic interfaces.

Layout Management

  • draggabilly:

    Draggabilly does not manage layouts itself; it simply enables drag-and-drop on existing elements. This makes it versatile but requires additional layout management if needed.

  • gridstack:

    Gridstack manages a grid layout where items can be placed, resized, and rearranged. It automatically handles the positioning of items, making it easy to create responsive layouts.

  • isotope-layout:

    Isotope provides layout management with advanced filtering and sorting capabilities, allowing items to be arranged dynamically based on user interactions. It adapts to various screen sizes and item dimensions effectively.

  • masonry-layout:

    Masonry Layout focuses on arranging items in a grid that adapts to varying heights, ensuring that gaps are minimized. It does not provide drag-and-drop functionality out of the box but can be enhanced with other libraries.

  • muuri:

    Muuri offers flexible layout management with support for both grid and masonry layouts. It allows for dynamic item positioning and reordering, making it suitable for complex applications that require a responsive design.

  • packery:

    Packery provides layout management similar to masonry but with added drag-and-drop capabilities. It efficiently fills gaps in the layout while allowing users to rearrange items interactively.

Performance

  • draggabilly:

    Draggabilly is lightweight and performs well for simple drag-and-drop tasks. However, it does not handle complex layouts, so performance may vary based on how it is integrated into larger applications.

  • gridstack:

    Gridstack is optimized for performance with a focus on grid layouts. It efficiently manages multiple draggable items, ensuring smooth interactions even with many widgets on the screen.

  • isotope-layout:

    Isotope is designed for performance with features like smart filtering and sorting. It efficiently handles dynamic layouts, but performance can be impacted with a large number of items if not optimized properly.

  • masonry-layout:

    Masonry Layout is efficient in arranging items but may require optimization for performance in large datasets. It focuses on minimizing gaps but does not handle drag-and-drop natively, which can affect overall performance.

  • muuri:

    Muuri is built for high performance, supporting complex layouts and interactions without significant lag. It is optimized for modern browsers and can handle large datasets effectively.

  • packery:

    Packery is designed for performance with a focus on filling gaps in layouts. It performs well with draggable items but may require careful management of large numbers of items to maintain smooth interactions.

Customization

  • draggabilly:

    Draggabilly allows for basic customization of drag-and-drop behavior but does not provide extensive options for layout management. It is best for simple use cases where minimal customization is needed.

  • gridstack:

    Gridstack offers extensive customization options for grid layouts, allowing developers to define item sizes, positions, and behaviors. This makes it highly flexible for dashboard-style applications.

  • isotope-layout:

    Isotope provides a high degree of customization for filtering, sorting, and layout arrangements. Developers can create unique user experiences tailored to specific needs, making it versatile for various applications.

  • masonry-layout:

    Masonry Layout allows for some customization in terms of item sizes and spacing but is primarily focused on the masonry layout itself. It is less flexible for drag-and-drop interactions without additional libraries.

  • muuri:

    Muuri is highly customizable, allowing developers to define item behaviors, animations, and layout styles. Its flexible API makes it suitable for a wide range of applications requiring dynamic layouts.

  • packery:

    Packery offers customization options for item positioning and layout behavior, allowing developers to create unique grid arrangements. It is designed to be flexible while maintaining efficient gap filling.

Use Cases

  • draggabilly:

    Draggabilly is ideal for applications that require simple drag-and-drop features, such as image galleries or interactive lists where users can reorder items without complex layout management.

  • gridstack:

    Gridstack is perfect for dashboard applications where users can customize their views by dragging and resizing widgets. It is well-suited for applications that require a grid-based layout with user interactivity.

  • isotope-layout:

    Isotope is best for galleries, portfolios, and any application where items need to be filtered and sorted dynamically. It provides a visually appealing layout that adapts to user interactions effectively.

  • masonry-layout:

    Masonry Layout is suitable for content-heavy applications like blogs or portfolios where items of varying heights need to be displayed without gaps. It is ideal for visually rich interfaces that prioritize aesthetics.

  • muuri:

    Muuri is versatile and can be used for complex applications requiring dynamic layouts, such as Kanban boards or interactive dashboards where items need to be rearranged frequently.

  • packery:

    Packery is great for applications that require a fluid layout with draggable items, such as creative portfolios or product showcases, where maintaining a visually appealing arrangement is essential.

How to Choose: draggabilly vs gridstack vs isotope-layout vs masonry-layout vs muuri vs packery

  • draggabilly:

    Choose Draggabilly if you need a lightweight and simple drag-and-drop solution that can be easily integrated into existing layouts without complex dependencies. It is ideal for projects where you want to add drag-and-drop functionality to specific elements without a full layout management system.

  • gridstack:

    Opt for Gridstack if you require a grid-based layout with draggable and resizable widgets. It is particularly useful for dashboard-like interfaces where users can customize their views by rearranging and resizing elements on the grid.

  • isotope-layout:

    Select Isotope if you need advanced filtering and sorting capabilities along with a masonry layout. It is perfect for galleries and portfolios where items can be dynamically filtered and rearranged based on user interactions, providing a visually appealing layout.

  • masonry-layout:

    Choose Masonry Layout if you want a simple and effective way to create a grid layout that adapts to varying item sizes. It is great for Pinterest-style layouts where items can be of different heights, and you want to fill the gaps efficiently without complex interactions.

  • muuri:

    Consider Muuri if you need a highly customizable layout library that supports drag-and-drop, sorting, and filtering with a focus on performance. It is suitable for applications that require a combination of dynamic layouts and user interactivity, offering a flexible API for advanced use cases.

  • packery:

    Use Packery if you want a grid layout that allows for draggable items with a focus on filling gaps efficiently. It combines features of masonry and grid layouts, making it ideal for applications where you want a fluid layout while maintaining drag-and-drop capabilities.

Similar Npm Packages to gridstack

gridstack is a powerful mobile-friendly TypeScript library for building responsive, draggable, and resizable dashboard layouts. It is framework neutral and works great with Angular (wrapper included), with example for React, Vue, and more. It allows developers to create dynamic and interactive grid interfaces easily, making it ideal for applications that require a flexible layout, such as dashboards and content management systems, complex nested grids and more. While gridstack is a robust solution for grid layouts, there are several alternatives that also offer unique features for managing grid-based designs. Here are a few noteworthy alternatives:

  • muuri is a versatile library for creating responsive and sortable grid layouts. It provides a flexible grid system that allows items to be dragged and rearranged seamlessly. Muuri supports various layout modes, including grid, masonry, and packery, making it suitable for a wide range of applications. If you need a library that offers advanced layout capabilities and smooth animations, muuri is an excellent choice.
  • packery is a layout library that focuses on creating grid layouts with a masonry-style approach. It allows items to be placed in a grid without strict alignment, enabling a more organic and fluid layout. Packery is particularly useful for applications where the arrangement of items should adapt to varying sizes and shapes. If your project requires a flexible, non-linear grid layout, packery is a strong contender.
  • vue-grid-layout is a grid layout library for Vue.js applications. It allows developers to create responsive grid layouts with draggable and resizable items. If you are working with Vue and need a grid layout solution, vue-grid-layout is a suitable alternative.

To explore how gridstack compares with muuri, packery, and vue-grid-layout, check out the comparison: Comparing gridstack vs muuri vs packery vs vue-grid-layout.

Similar Npm Packages to masonry-layout

masonry-layout is a JavaScript library that enables developers to create responsive grid layouts for web applications. It allows items to be arranged in a masonry style, where elements are positioned in optimal places based on available vertical space. This layout technique is particularly useful for displaying images, cards, or any other content that varies in size. While masonry-layout is a popular choice for creating such layouts, there are other libraries that offer similar functionalities. Here are a few alternatives:

  • isotope-layout is a versatile layout library that not only supports masonry layouts but also provides filtering and sorting capabilities. It allows developers to create dynamic and responsive layouts that can adapt to various screen sizes and content types. Isotope is particularly useful for applications that require interactive features, such as filtering items based on categories or tags. If you need a layout library that combines masonry-style positioning with advanced features like filtering and sorting, Isotope is an excellent choice.
  • muuri is another powerful layout library that provides a flexible and responsive grid system. It supports various layout modes, including masonry, and offers features such as drag-and-drop functionality, filtering, and sorting. Muuri is designed for performance and can handle large datasets efficiently. If your application requires a highly interactive and customizable layout with features like drag-and-drop, Muuri is a strong contender.
  • masonry-layout itself is a solid option for developers looking for a straightforward masonry layout solution without the additional complexity of filtering or sorting. It focuses solely on arranging items in a masonry style, making it easy to implement and integrate into projects where advanced features are not necessary.

To see how these libraries compare, check out the comparison: Comparing isotope-layout vs masonry-layout vs muuri.

Similar Npm Packages to muuri

muuri is a versatile and flexible layout library for creating responsive grid layouts with draggable and sortable items. It allows developers to build dynamic interfaces that can adapt to various screen sizes and user interactions. Muuri combines the features of masonry layouts, grid layouts, and drag-and-drop functionality, making it an excellent choice for applications that require a highly interactive and visually appealing layout. While Muuri is a powerful option, there are several alternatives available that also provide similar functionalities. Here are a few notable alternatives:

  • draggabilly is a lightweight and straightforward library that enables drag-and-drop functionality for HTML elements. It focuses solely on making elements draggable, without the additional layout features provided by Muuri. If you only need to implement drag-and-drop capabilities without complex layout management, Draggabilly is an excellent choice. It is easy to integrate and works well with other layout libraries.

  • gridstack is a powerful mobile-friendly TypeScript library for building responsive, draggable, and resizable dashboard layouts. It is framework neutral and works great with Angular (wrapper included), with example for React, Vue, and more. It allows developers to create dynamic and interactive grid interfaces easily, making it ideal for applications that require a flexible layout, such as dashboards and content management systems, complex nested grids and more.

  • isotope-layout is a layout library that enables filtering, sorting, and dynamic layouts. It provides a masonry-style layout with support for draggable elements. Isotope is ideal for applications that require complex filtering and sorting functionalities alongside a flexible layout. If you need a combination of layout management and item filtering, Isotope is a powerful option.

  • masonry-layout is a library that creates a masonry-style grid layout, where items are arranged in a way that minimizes vertical gaps. While it does not include drag-and-drop functionality, it is an excellent choice for applications that require a visually appealing layout without the need for interactivity. If your focus is solely on creating a masonry layout, this library is a great fit.

  • packery is a layout library that combines the features of masonry and draggable layouts. It allows for a grid layout where items can be rearranged and fit together like a puzzle. Packery is suitable for applications that require both a flexible layout and drag-and-drop capabilities, making it a strong alternative to Muuri.

To explore how Muuri compares with these alternatives, check out the comparison: Comparing draggabilly vs gridstack vs isotope-layout vs masonry-layout vs muuri vs packery.

Similar Npm Packages to packery

packery is a JavaScript library that provides a grid layout for arranging elements in a responsive and dynamic manner. It allows for a flexible arrangement of items, enabling them to be placed in a way that optimizes space and enhances visual appeal. Packery's unique feature is its ability to allow items to be dragged and rearranged, making it ideal for applications that require a customizable layout, such as galleries, dashboards, or product listings. The library is highly configurable and works well with various frameworks, making it a popular choice among developers looking to implement grid layouts.

However, there are alternatives to Packery that also offer grid layout solutions:

  • gridstack is a powerful mobile-friendly TypeScript library for building responsive, draggable, and resizable dashboard layouts. It is framework neutral and works great with Angular (wrapper included), with example for React, Vue, and more. It allows developers to create dynamic and interactive grid interfaces easily, making it ideal for applications that require a flexible layout, such as dashboards and content management systems, complex nested grids and more.
  • isotope-layout is a powerful layout library that not only provides grid layouts but also offers filtering and sorting capabilities. Isotope allows for dynamic rearrangement of items based on user interactions, such as filtering or sorting, making it suitable for applications that require more than just a static layout. With its robust features, Isotope is ideal for galleries, portfolios, and e-commerce sites where users might want to interact with the displayed items.
  • masonry-layout is another popular library focused on creating a masonry-style grid layout. It arranges elements in a way that minimizes vertical gaps, creating a visually appealing layout similar to a brick wall. Masonry is particularly useful for image galleries, blogs, and other content-heavy applications where the size of items may vary. While it does not offer the drag-and-drop functionality of Packery, it excels in creating a clean and organized layout for diverse content.

To see how Packery compares with other layout libraries, check out the comparison: Comparing gridstack vs packery vs isotope-layout vs masonry-layout.

README for draggabilly

Draggabilly

Make that shiz draggable

draggabilly.desandro.com

Rad because it supports IE10+ and touch devices.

Draggabilly v3.0.0

Install

Download

Package managers

Install with npm: npm install draggabilly

Install with Yarn: yarn add draggabilly

CDN

Link directly to draggabilly.pkgd.min.js on unpkg.com.

<script src="https://unpkg.com/draggabilly@3/dist/draggabilly.pkgd.min.js"></script>

Usage

Initialize Draggabilly as a jQuery plugin

var $draggable = $('.draggable').draggabilly({
  // options...
})

Initialize Draggabilly with vanilla JS

var elem = document.querySelector('.draggable');
var draggie = new Draggabilly( elem, {
  // options...
});

// or pass in selector string as first argument
var draggie = new Draggabilly( '.draggable', {
  // options...
});

// if you have multiple .draggable elements
// get all draggie elements
var draggableElems = document.querySelectorAll('.draggable');
// array of Draggabillies
var draggies = []
// init Draggabillies
for ( var i=0; i < draggableElems.length; i++ ) {
  var draggableElem = draggableElems[i];
  var draggie = new Draggabilly( draggableElem, {
    // options...
  });
  draggies.push( draggie );
}

Classes

  • .is-pointer-down added when the user's pointer (mouse, touch, pointer) first presses down.
  • .is-dragging added when elements starts to drag.

Options

axis

Type: String

Values: 'x' or 'y'

axis: 'x'

Constrains movement to horizontal or vertical axis.

containment

Type: Element, Selector String, or Boolean

containment: '.container'

Contains movement to the bounds of the element. If true, the container will be the parent element.

grid

Type: Array

Values: [ x, y ]

grid: [ 20, 20 ]

Snaps the element to a grid, every x and y pixels.

handle

Type: Selector String, Array, HTMLElement

// select all .handle children with selector string
handle: '.handle'

// set as element
handle: element.querySelector('.handle')

// set as array or NodeList
handle: [ element.querySelector('.handle1'), element.querySelector('.handle2') ]

Specifies on what element the drag interaction starts.

handle is useful for when you do not want all inner elements to be used for dragging, like inputs and forms. See back handle example on CodePen.

Events

Bind events with jQuery with standard jQuery event methods .on(), .off(), and .one(). Inside jQuery event listeners this refers to the Draggabilly element.

// jQuery
function listener(/* parameters */) {
  // get Draggabilly instance
  var draggie = $(this).data('draggabilly');
  console.log( 'eventName happened', draggie.position.x, draggie.position.y );
}
// bind event listener
$draggable.on( 'eventName', listener );
// unbind event listener
$draggable.off( 'eventName', listener );
// bind event listener to trigger once. note ONE not ON
$draggable.one( 'eventName', function() {
  console.log('eventName happened just once');
});

Bind events with vanilla JS with .on(), .off(), and .once() methods. Inside vanilla JS event listeners this refers to the Draggabilly instance.

// vanilla JS
function listener(/* parameters */) {
  console.log( 'eventName happened', this.position.x, this.position.y );
}
// bind event listener
draggie.on( 'eventName', listener );
// unbind event listener
draggie.off( 'eventName', listener );
// bind event listener to trigger once. note ONCE not ONE or ON
draggie.once( 'eventName', function() {
  console.log('eventName happened just once');
});

dragStart

Triggered when dragging starts and the element starts moving. Dragging starts after the user's pointer has moved a couple pixels to allow for clicks.

// jQuery
$draggable.on( 'dragStart', function( event, pointer ) {...})
// vanilla JS
draggie.on( 'dragStart', function( event, pointer ) {...})
  • event - Type: Event - the original mousedown or touchstart event
  • pointer - Type: MouseEvent or Touch - the event object that has .pageX and .pageY

dragMove

Triggered when dragging moves.

// jQuery
$draggable.on( 'dragMove', function( event, pointer, moveVector ) {...})
// vanilla JS
draggie.on( 'dragMove', function( event, pointer, moveVector ) {...})
  • event - Type: Event - the original mousemove or touchmove event
  • pointer - Type: MouseEvent or Touch - the event object that has .pageX and .pageY
  • moveVector Type: Object - How far the pointer has moved from its start position { x: 20, y: -30 }

dragEnd

Triggered when dragging ends.

// jQuery
$draggable.on( 'dragEnd', function( event, pointer ) {...})
// vanilla JS
draggie.on( 'dragEnd', function( event, pointer ) {...})
  • event - Type: Event - the original mouseup or touchend event
  • pointer - Type: MouseEvent or Touch - the event object that has .pageX and .pageY

pointerDown

Triggered when the user's pointer (mouse, touch, pointer) presses down.

// jQuery
$draggable.on( 'pointerDown', function( event, pointer ) {...})
// vanilla JS
draggie.on( 'pointerDown', function( event, pointer ) {...})
  • event - Type: Event - the original mousedown or touchstart event
  • pointer - Type: MouseEvent or Touch - the event object that has .pageX and .pageY

pointerMove

Triggered when the user's pointer moves.

// jQuery
$draggable.on( 'pointerMove', function( event, pointer, moveVector ) {...})
// vanilla JS
draggie.on( 'pointerMove', function( event, pointer, moveVector ) {...})
  • event - Type: Event - the original mousemove or touchmove event
  • pointer - Type: MouseEvent or Touch - the event object that has .pageX and .pageY
  • moveVector Type: Object - How far the pointer has moved from its start position { x: 20, y: -30 }

pointerUp

Triggered when the user's pointer unpresses.

// jQuery
$draggable.on( 'pointerUp', function( event, pointer ) {...})
// vanilla JS
draggie.on( 'pointerUp', function( event, pointer ) {...})
  • event - Type: Event - the original mouseup or touchend event
  • pointer - Type: MouseEvent or Touch - the event object that has .pageX and .pageY

staticClick

Triggered when the user's pointer is pressed and unpressed and has not moved enough to start dragging.

click events are hard to detect with draggable UI, as they are triggered whenever a user drags. Draggabilly's staticClick event resolves this, as it is triggered when the user has not dragged.

// jQuery
$draggable.on( 'staticClick', function( event, pointer ) {...})
// vanilla JS
draggie.on( 'staticClick', function( event, pointer ) {...})
  • event - Type: Event - the original mouseup or touchend event
  • pointer - Type: MouseEvent or Touch - the event object that has .pageX and .pageY

Methods

disable

// jQuery
$draggable.draggabilly('disable')
// vanilla JS
draggie.disable()

enable

// jQuery
$draggable.draggabilly('enable')
// vanilla JS
draggie.enable()

setPosition

// jQuery
$draggable.draggabilly( 'setPosition', x, y )
// vanilla JS
draggie.setPosition( x, y )
  • x - Type: Number - horizontal position
  • y - Type: Number - vertical position

dragEnd

Stop dragging.

// jQuery
$draggable.draggabilly('dragEnd')
// vanilla JS
draggie.dragEnd()

destroy

// jQuery
$draggable.draggabilly('destroy')
// vanilla JS
draggie.destroy()

jQuery.fn.data('draggabilly')

Get the Draggabilly instance from a jQuery object. Draggabilly instances are useful to access Draggabilly properties.

var draggie = $('.draggable').data('draggabilly')
// access Draggabilly properties
console.log( 'draggie at ' + draggie.position.x + ', ' + draggie.position.y )

Properties

position

draggie.position
// => { x: 20, y: -30 }
  • position - Type: Object
  • x - Type: Number
  • y - Type: Number

Module loaders

Webpack & Browserify

Install Draggabilly with npm.

npm install draggabilly

var Draggabilly = require('draggabilly');

var draggie = new Draggabilly( '.draggable', {
  // options
});

To use Draggabilly as a jQuery plugin, you need to install and call jQuery Bridget.

npm install jquery-bridget

var $ = require('jquery');
var jQueryBridget = require('jquery-bridget');
var Draggabilly = require('draggabilly');

// make Draggabilly a jQuery plugin
jQueryBridget( 'draggabilly', Draggabilly, $ );
// now you can use $().draggabilly()
$('.draggable').draggabilly({...})

Browser support

Draggabilly v3 supports Chrome 49+, Firefox 41+, Safari 14+ (mobile & desktop), and Edge 12+.

License

Draggabilly is released under the MIT License. Have at it.

Made by David DeSandro 😻

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc, the official website for the npm registry. Note that npm is a registered trademark of npm, Inc. Please share your feedback via our GitHub repository. For more details, please refer to our Terms & Privacy.