@types/sortablejs

What is @types/sortablejs?

@types/sortablejs provides TypeScript type definitions for the SortableJS library, which is a JavaScript library for creating sortable lists and grids using native drag-and-drop functionality.

What are @types/sortablejs's main functionalities?

Basic Sortable List

This feature allows you to create a basic sortable list. By initializing Sortable on a DOM element, you can enable drag-and-drop sorting for its child elements.

import Sortable from 'sortablejs';

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

Custom Drag Handle

This feature allows you to specify a custom drag handle. Only elements matching the selector specified in the 'handle' option will be draggable.

import Sortable from 'sortablejs';

const el = document.getElementById('items');
const sortable = Sortable.create(el, {
  handle: '.handle'
});

Sortable with Animation

This feature enables animation during sorting. The 'animation' option specifies the duration of the animation in milliseconds.

import Sortable from 'sortablejs';

const el = document.getElementById('items');
const sortable = Sortable.create(el, {
  animation: 150
});

Group Sorting

This feature allows you to enable sorting between multiple lists. By setting the same 'group' option for multiple Sortable instances, items can be dragged between these lists.

import Sortable from 'sortablejs';

const el1 = document.getElementById('items1');
const el2 = document.getElementById('items2');

const sortable1 = Sortable.create(el1, {
  group: 'shared'
});
const sortable2 = Sortable.create(el2, {
  group: 'shared'
});

Other packages similar to @types/sortablejs

react-beautiful-dnd

react-beautiful-dnd is a drag-and-drop library for React applications. It provides a higher-level abstraction compared to SortableJS and is designed specifically for React, making it easier to integrate with React components.

dragula

dragula is a drag-and-drop library that focuses on simplicity and ease of use. It provides a straightforward API for creating sortable lists and grids, but it lacks some of the advanced features and customization options available in SortableJS.

interactjs

interactjs is a versatile library for drag-and-drop, resizing, and multi-touch gestures. It offers more comprehensive functionality beyond just sorting, making it suitable for more complex interactions. However, it may be overkill for simple sortable lists.

README

Installation

npm install --save @types/sortablejs

Summary

This package contains type definitions for sortablejs (https://github.com/RubaXa/Sortable).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/sortablejs.

Additional Details

• Last updated: Sat, 17 Feb 2024 02:11:20 GMT
• Dependencies: none

Credits

These definitions were written by Maw-Fox, Maarten Staa, and Wayne Van Son.