tessl/npm-sortablejs

JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Sortable

Name: tessl/npm-sortablejs
Author: tessl

Sortable is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. It provides smooth animations, multi-drag support, and framework-agnostic integration without requiring jQuery.

Package Information

Package Name: sortablejs
Package Type: npm
Language: JavaScript
Installation: npm install sortablejs

Core Imports

Default Import (Full Build)

import Sortable from "sortablejs";

For CommonJS:

const Sortable = require("sortablejs");

Modular Imports

Core Build (without default plugins):

import Sortable from "sortablejs/modular/sortable.core.esm.js";

Complete Build (with all plugins):

import Sortable from "sortablejs/modular/sortable.complete.esm.js";

Default Build (with standard plugins):

import Sortable from "sortablejs/modular/sortable.esm.js";

Plugin Cherry-picking

// Import with specific plugins
import Sortable, { MultiDrag, AutoScroll, Swap } from "sortablejs";

// Mount plugins before use
Sortable.mount(new MultiDrag(), new AutoScroll(), new Swap());

// From core build
import Sortable, { AutoScroll } from "sortablejs/modular/sortable.core.esm.js";
Sortable.mount(new AutoScroll());

Basic Usage

import Sortable from "sortablejs";

// Create a sortable list
const el = document.getElementById('items');
const sortable = Sortable.create(el, {
  animation: 150,
  ghostClass: 'sortable-ghost',
  onEnd: function(evt) {
    console.log('Item moved from index', evt.oldIndex, 'to', evt.newIndex);
  }
});

// Get the current order
const order = sortable.toArray();

// Programmatically sort
sortable.sort(['item-1', 'item-3', 'item-2']);

// Cleanup
sortable.destroy();

Architecture

Sortable is built around several key components that work together to provide comprehensive drag-and-drop functionality:

Core Constructor System

Main Sortable Class: Central controller that manages all drag-and-drop behavior and instance lifecycle
Static Methods: Factory methods (Sortable.create()) and global utilities (Sortable.get(), Sortable.mount())
Instance Management: Each DOM element can have one Sortable instance stored via internal expando property

Event System Architecture

Comprehensive Lifecycle: 12+ events covering the complete drag cycle from selection to completion
Event Bubbling Control: Configurable event bubbling and cancellation for custom behavior
Cross-List Communication: Events automatically handle data flow between multiple connected lists

Plugin Architecture

Modular Design: Core functionality can be extended with plugins without modifying the base library
Plugin Manager: Central system for mounting, initializing, and coordinating multiple plugins
Built-in Plugins: MultiDrag, AutoScroll, Swap, and OnSpill plugins provide advanced functionality
Event Integration: Plugins can inject custom event properties and lifecycle hooks

Utility System

DOM Utilities: Cross-browser DOM manipulation, event handling, and element querying
Performance Optimizations: Throttling, async scheduling, and efficient animation systems
Framework Integration: Utilities designed to work with React, Vue, Angular and other frameworks

Cross-Browser Compatibility

HTML5 Drag and Drop: Primary implementation using native browser APIs when available
Fallback Mode: Custom touch/mouse handling for older browsers or when forced
Mobile Support: Touch event handling optimized for iOS, Android, and modern mobile browsers
Browser Detection: Intelligent feature detection for Safari, Chrome, Firefox, IE11+ compatibility

Capabilities

Core API

Main constructor, static methods, and instance methods for creating and managing sortable lists.

function Sortable(el: HTMLElement, options?: SortableOptions): Sortable;
Sortable.create(el: HTMLElement, options?: SortableOptions): Sortable;
Sortable.get(element: HTMLElement): Sortable | undefined;

Core API

Configuration Options

Comprehensive configuration system with 25+ options for customizing drag behavior, visual feedback, and interaction patterns.

interface SortableOptions {
  group?: string | GroupOptions;
  sort?: boolean;
  disabled?: boolean;
  animation?: number;
  handle?: string;
  draggable?: string;
  // ... 20+ additional options
}

Configuration Options

Event System

Rich event lifecycle with callbacks for drag start/end, list changes, and custom interactions.

interface EventCallbacks {
  onStart?: (evt: SortableEvent) => void;
  onEnd?: (evt: SortableEvent) => void;
  onAdd?: (evt: SortableEvent) => void;
  onUpdate?: (evt: SortableEvent) => void;
  // ... 8+ additional events
}

Events

Plugin System

Extensible plugin architecture for advanced functionality like multi-drag, auto-scroll, and element swapping.

Sortable.mount(...plugins: SortablePlugin[]): void;

// Available plugins
import { MultiDrag, AutoScroll, Swap, OnSpill } from "sortablejs";

Plugins

Utility Functions

Collection of DOM manipulation and helper functions for advanced integrations and custom implementations.

interface SortableUtils {
  on(el: HTMLElement, event: string, fn: Function): void;
  off(el: HTMLElement, event: string, fn: Function): void;
  css(el: HTMLElement, prop: string, value?: string): string | void;
  find(ctx: HTMLElement, tagName: string, iterator?: Function): HTMLElement[];
  // ... 15+ additional utilities
}

Utilities

Types

interface SortableEvent {
  to: HTMLElement;
  from: HTMLElement;
  item: HTMLElement;
  clone?: HTMLElement;
  oldIndex: number;
  newIndex: number;
  oldDraggableIndex: number;
  newDraggableIndex: number;
  pullMode?: string | boolean;
}

interface GroupOptions {
  name: string;
  pull?: boolean | string | string[] | ((to: Sortable, from: Sortable) => boolean);
  put?: boolean | string | string[] | ((to: Sortable, from: Sortable) => boolean);
  revertClone?: boolean;
}

class Sortable {
  constructor(el: HTMLElement, options?: SortableOptions);
  el: HTMLElement;
  options: SortableOptions;
  
  // Instance methods
  toArray(): string[];
  sort(order: string[], useAnimation?: boolean): void;
  save(): void;
  closest(el: HTMLElement, selector?: string): HTMLElement | null;
  option(name: string, value?: any): any;
  destroy(): void;
  handleEvent(evt: Event): void;
}