Convert Figma logo to code with AI

HubSpot logosortable

Drop-in script to make tables sortable

1,325
115
1,325
26

Top Related Projects

29,388

Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.

21,948

:ok_hand: Drag and drop so simple it hurts

VanillaJS sortable lists and grids using native HTML5 drag and drop API.

17,946

The JavaScript Drag & Drop library your grandparents warned you about.

Beautiful and accessible drag and drop for lists with React

Quick Overview

HubSpot/sortable is a lightweight JavaScript library that enables drag-and-drop sorting functionality for HTML elements. It allows users to reorder items within a list or grid by simply dragging and dropping them, providing an intuitive and interactive user experience.

Pros

  • Easy to implement and integrate into existing projects
  • Lightweight and performant, with minimal dependencies
  • Supports both mouse and touch interactions for mobile compatibility
  • Customizable with various options and callbacks

Cons

  • Limited built-in styling options, requiring additional CSS for visual enhancements
  • May require additional work to implement accessibility features
  • Documentation could be more comprehensive, especially for advanced use cases

Code Examples

  1. Basic usage:
import Sortable from 'sortablejs';

const el = document.getElementById('items');
const sortable = Sortable.create(el);

This code creates a basic sortable list using the default options.

  1. Customizing options:
const sortable = Sortable.create(el, {
  animation: 150,
  ghostClass: 'blue-background-class',
  onEnd: (evt) => {
    console.log('Item moved from index', evt.oldIndex, 'to', evt.newIndex);
  }
});

This example adds animation, applies a custom class to the ghost element, and logs the old and new indices when an item is moved.

  1. Nested lists:
Sortable.create(document.getElementById('outer-list'), {
  group: 'nested',
  animation: 150
});

document.querySelectorAll('.inner-list').forEach(el => {
  Sortable.create(el, {
    group: 'nested',
    animation: 150
  });
});

This code creates sortable nested lists, allowing items to be dragged between different levels.

Getting Started

To use Sortable in your project, follow these steps:

  1. Install the library:

    npm install sortablejs
    
  2. Import and use in your JavaScript file:

    import Sortable from 'sortablejs';
    
    const el = document.getElementById('my-list');
    const sortable = Sortable.create(el, {
      animation: 150,
      ghostClass: 'sortable-ghost'
    });
    
  3. Add some basic CSS for visual feedback:

    .sortable-ghost {
      opacity: 0.5;
      background: #c8ebfb;
    }
    

Now you have a basic sortable list set up in your project. Customize the options and styling to fit your specific needs.

Competitor Comparisons

29,388

Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.

Pros of Sortable

  • More actively maintained with frequent updates and bug fixes
  • Supports a wider range of features, including multi-drag and clone operations
  • Better cross-browser compatibility, including mobile devices

Cons of Sortable

  • Larger file size, which may impact page load times
  • Steeper learning curve due to more complex API and configuration options
  • May be overkill for simple sorting tasks

Code Comparison

Sortable:

new Sortable(document.getElementById('list'), {
  animation: 150,
  ghostClass: 'blue-background-class'
});

sortable:

$('#list').sortable({
  items: 'li',
  placeholder: '<li class="placeholder"></li>'
});

Key Differences

  • Sortable uses vanilla JavaScript, while sortable relies on jQuery
  • Sortable offers more customization options out of the box
  • sortable has a simpler API, making it easier to implement basic sorting functionality

Use Cases

  • Choose Sortable for complex, feature-rich sorting requirements or when working with modern web applications
  • Opt for sortable in jQuery-based projects or when simplicity is preferred over extensive features

Community and Support

  • Sortable has a larger community, more contributors, and more frequent updates
  • sortable has a smaller but dedicated user base, with less frequent updates
21,948

:ok_hand: Drag and drop so simple it hurts

Pros of Dragula

  • Lightweight and dependency-free, making it easier to integrate into various projects
  • Supports both drag-and-drop and sorting functionality out of the box
  • More actively maintained with recent updates and bug fixes

Cons of Dragula

  • Less customizable than Sortable, with fewer configuration options
  • May require more manual setup for complex sorting scenarios
  • Doesn't support as many advanced features like multi-list sorting

Code Comparison

Sortable initialization:

Sortable.create(element, {
  animation: 150,
  ghostClass: "blue-background-class"
});

Dragula initialization:

dragula([element], {
  moves: function (el, container, handle) {
    return handle.classList.contains('handle');
  }
});

Both libraries offer straightforward initialization, but Sortable provides more built-in options for customization, while Dragula relies on custom functions for advanced behavior.

VanillaJS sortable lists and grids using native HTML5 drag and drop API.

Pros of html5sortable

  • Lightweight and dependency-free, making it easier to integrate into projects
  • Supports modern browsers and touch devices out of the box
  • Actively maintained with regular updates and bug fixes

Cons of html5sortable

  • Less extensive documentation compared to sortable
  • Fewer advanced features and customization options
  • Smaller community and ecosystem around the project

Code Comparison

html5sortable:

sortable('.sortable', {
  forcePlaceholderSize: true,
  placeholderClass: 'my-placeholder'
});

sortable:

new Sortable(document.getElementById('list'), {
  animation: 150,
  ghostClass: 'blue-background-class'
});

Both libraries offer similar basic functionality for creating sortable lists. html5sortable uses a more straightforward approach with a single function call, while sortable uses a constructor pattern. The configuration options differ slightly, but both allow customization of the sorting behavior and appearance.

html5sortable focuses on simplicity and modern browser support, making it a good choice for projects that prioritize lightweight solutions. sortable, on the other hand, offers more advanced features and extensive documentation, which may be beneficial for complex applications or developers who need more detailed guidance.

17,946

The JavaScript Drag & Drop library your grandparents warned you about.

Pros of Draggable

  • More comprehensive and feature-rich, offering multiple drag-and-drop modules (Draggable, Sortable, Swappable, Droppable)
  • Better documentation and examples, including interactive demos
  • Actively maintained with regular updates and a larger community

Cons of Draggable

  • Larger file size and potentially higher performance overhead due to its extensive feature set
  • Steeper learning curve for simple use cases compared to Sortable's straightforward API

Code Comparison

Sortable:

Sortable.create(element, {
  animation: 150,
  ghostClass: "blue-background-class"
});

Draggable:

const sortable = new Sortable.default(containers, {
  draggable: '.item',
  delay: 150,
  mirror: {
    appendTo: 'body',
    constrainDimensions: true
  }
});

Both libraries offer similar basic functionality, but Draggable provides more granular control over the drag-and-drop behavior. Sortable's API is simpler and more concise, while Draggable offers more advanced options and customization possibilities.

Beautiful and accessible drag and drop for lists with React

Pros of react-beautiful-dnd

  • Built specifically for React, offering seamless integration with React components
  • Provides a more accessible drag-and-drop experience with keyboard support
  • Offers smooth animations and visual feedback during drag operations

Cons of react-beautiful-dnd

  • Limited to vertical, horizontal, or grid lists, lacking support for free-form dragging
  • Steeper learning curve due to its React-specific implementation
  • Larger bundle size compared to sortable

Code Comparison

react-beautiful-dnd:

import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

<DragDropContext onDragEnd={onDragEnd}>
  <Droppable droppableId="list">
    {(provided) => (
      <ul {...provided.droppableProps} ref={provided.innerRef}>
        {items.map((item, index) => (
          <Draggable key={item.id} draggableId={item.id} index={index}>
            {(provided) => (
              <li ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
                {item.content}
              </li>
            )}
          </Draggable>
        ))}
        {provided.placeholder}
      </ul>
    )}
  </Droppable>
</DragDropContext>

sortable:

<ul id="sortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  new Sortable(document.getElementById('sortable'), {
    animation: 150,
    ghostClass: 'blue-background-class'
  });
</script>

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Sortable

Demo    Documentation

Sortable is an open-source JavaScript and CSS library which adds sorting functionality to tables. It is tiny (<2kb min+gzip) and has no dependencies.

NPM DownloadsLast 30 Days