tessl/npm-jquery-ui

A curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.

—

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

Interactions

Name: tessl/npm-jquery-ui
Author: tessl

jQuery UI interactions provide mouse-based behaviors for dragging, dropping, resizing, selecting, and sorting elements. These widgets inherit from the mouse widget and share common interaction patterns.

Capabilities

Draggable

Makes elements draggable with mouse interaction and extensive customization options.

/**
 * Creates a draggable widget
 * @param {DraggableOptions} options - Configuration options
 */
$(...).draggable(options);

interface DraggableOptions {
  addClasses?: boolean;               // Add ui-draggable class (default: true)
  appendTo?: string | Element;        // Element to append helper to
  axis?: 'x' | 'y' | false;         // Constrain dragging to axis
  cancel?: string;                   // Selector for elements that cancel dragging
  classes?: object;                  // CSS classes to apply
  connectToSortable?: string;        // Selector for sortable containers
  containment?: string | Element | Array; // Containment boundary
  cursor?: string;                   // CSS cursor during drag
  cursorAt?: { top?: number, left?: number, right?: number, bottom?: number }; // Cursor position relative to helper
  delay?: number;                    // Delay in milliseconds before dragging starts
  disabled?: boolean;                // Disable the draggable
  distance?: number;                 // Distance in pixels before dragging starts
  grid?: [number, number];           // Snap to grid coordinates
  handle?: string | Element;         // Handle selector for dragging
  helper?: 'original' | 'clone' | Function; // Helper element type
  iframeFix?: boolean | string;      // Fix iframe mousemove issues
  opacity?: number;                  // Opacity of helper during drag
  refreshPositions?: boolean;        // Refresh droppable positions during drag
  revert?: boolean | 'valid' | 'invalid' | Function; // Revert behavior
  revertDuration?: number;           // Revert animation duration
  scope?: string;                    // Scope for droppable interaction
  scroll?: boolean;                  // Enable scrolling during drag
  scrollSensitivity?: number;        // Distance from edge to start scrolling
  scrollSpeed?: number;              // Scroll speed
  snap?: boolean | string;           // Snap to elements
  snapMode?: 'inner' | 'outer' | 'both'; // Snap mode
  snapTolerance?: number;            // Snap tolerance in pixels
  stack?: string;                    // Selector for elements to stack
  zIndex?: number;                   // Z-index of helper during drag
}

Events:

dragcreate - Triggered when draggable is created
dragstart - Triggered when dragging starts
drag - Triggered during dragging
dragstop - Triggered when dragging stops

Usage Examples:

// Basic draggable
$('#draggable').draggable();

// Constrained to container
$('#draggable').draggable({
  containment: '#container'
});

// Snap to grid
$('#draggable').draggable({
  grid: [20, 20]
});

// Custom helper
$('#draggable').draggable({
  helper: 'clone',
  opacity: 0.7
});

Droppable

Makes elements targets for draggable elements with customizable acceptance criteria.

/**
 * Creates a droppable widget
 * @param {DroppableOptions} options - Configuration options
 */
$(...).droppable(options);

interface DroppableOptions {
  accept?: string | Function;         // Selector or function for acceptable draggables
  activeClass?: string;              // Class applied when acceptable draggable is being dragged
  addClasses?: boolean;              // Add ui-droppable class (default: true)
  classes?: object;                  // CSS classes to apply
  disabled?: boolean;                // Disable the droppable
  greedy?: boolean;                  // Prevent event propagation to parent droppables
  hoverClass?: string;               // Class applied when acceptable draggable hovers
  scope?: string;                    // Scope for draggable interaction
  tolerance?: 'fit' | 'intersect' | 'pointer' | 'touch'; // Drop tolerance
}

Events:

dropactivate - Triggered when acceptable draggable starts dragging
dropcreate - Triggered when droppable is created
dropdeactivate - Triggered when acceptable draggable stops dragging
dropdrop - Triggered when acceptable draggable is dropped
dropout - Triggered when acceptable draggable moves out
dropover - Triggered when acceptable draggable moves over

Usage Examples:

// Basic droppable
$('#droppable').droppable({
  drop: function(event, ui) {
    $(this).addClass('dropped');
  }
});

// Accept specific elements
$('#droppable').droppable({
  accept: '.draggable-item',
  hoverClass: 'drop-hover',
  drop: function(event, ui) {
    ui.draggable.detach().appendTo(this);
  }
});

// Multiple droppables with scope
$('.droppable').droppable({
  scope: 'special',
  tolerance: 'intersect'
});

Resizable

Makes elements resizable with drag handles and size constraints.

/**
 * Creates a resizable widget
 * @param {ResizableOptions} options - Configuration options
 */
$(...).resizable(options);

interface ResizableOptions {
  alsoResize?: string | Element;      // Elements to resize simultaneously
  animate?: boolean;                 // Animate resize
  animateDuration?: number | string; // Animation duration
  animateEasing?: string;            // Animation easing
  aspectRatio?: boolean | number;    // Maintain aspect ratio
  autoHide?: boolean;                // Auto-hide handles when not hovering
  cancel?: string;                   // Selector for elements that cancel resizing
  classes?: object;                  // CSS classes to apply
  containment?: string | Element;    // Containment boundary
  delay?: number;                    // Delay before resizing starts
  disabled?: boolean;                // Disable the resizable
  distance?: number;                 // Distance before resizing starts
  ghost?: boolean;                   // Show ghost outline during resize
  grid?: [number, number];           // Snap to grid coordinates
  handles?: string | object;         // Resize handles configuration
  helper?: string;                   // Helper class name
  maxHeight?: number;                // Maximum height
  maxWidth?: number;                 // Maximum width
  minHeight?: number;                // Minimum height
  minWidth?: number;                 // Minimum width
}

Events:

resizecreate - Triggered when resizable is created
resizestart - Triggered when resizing starts
resize - Triggered during resizing
resizestop - Triggered when resizing stops

Usage Examples:

// Basic resizable
$('#resizable').resizable();

// With constraints
$('#resizable').resizable({
  minWidth: 100,
  minHeight: 100,
  maxWidth: 500,
  maxHeight: 300
});

// Maintain aspect ratio
$('#resizable').resizable({
  aspectRatio: true,
  handles: 'n, e, s, w, ne, se, sw, nw'
});

// Ghost resize
$('#resizable').resizable({
  ghost: true,
  helper: 'resizable-helper'
});

Selectable

Makes elements selectable with mouse interaction, supporting individual and lasso selection.

/**
 * Creates a selectable widget
 * @param {SelectableOptions} options - Configuration options
 */
$(...).selectable(options);

interface SelectableOptions {
  appendTo?: string;                 // Element to append lasso helper to
  autoRefresh?: boolean;             // Auto-refresh element positions
  cancel?: string;                   // Selector for elements that cancel selection
  classes?: object;                  // CSS classes to apply
  delay?: number;                    // Delay before selection starts
  disabled?: boolean;                // Disable the selectable
  distance?: number;                 // Distance before selection starts
  filter?: string;                   // Selector for selectable elements
  tolerance?: 'fit' | 'touch';      // Selection tolerance
}

Events:

selectablecreate - Triggered when selectable is created
selectablestart - Triggered when selection starts
selectableselecting - Triggered for each element being selected
selectableselected - Triggered for each element after selection
selectableunselecting - Triggered for each element being unselected
selectableunselected - Triggered for each element after unselection
selectablestop - Triggered when selection stops

Usage Examples:

// Basic selectable list
$('#selectable').selectable();

// Custom filter and tolerance
$('#selectable').selectable({
  filter: 'li',
  tolerance: 'touch'
});

// Handle selection events
$('#selectable').selectable({
  selected: function(event, ui) {
    $(ui.selected).addClass('highlighted');
  },
  unselected: function(event, ui) {
    $(ui.unselected).removeClass('highlighted');
  }
});

Sortable

Makes list elements sortable by dragging with extensive customization options.

/**
 * Creates a sortable widget
 * @param {SortableOptions} options - Configuration options
 */
$(...).sortable(options);

/**
 * Cancels current sort operation
 */
$(...).sortable('cancel');

/**
 * Refreshes cached information about sortable items
 */
$(...).sortable('refresh');

/**
 * Refreshes cached position information
 */
$(...).sortable('refreshPositions');

/**
 * Serializes sortable items to URL query string
 * @param {object} options - Serialization options
 * @returns {string} Query string
 */
$(...).sortable('serialize', options);

/**
 * Returns array of item IDs in current order
 * @param {object} options - Array options
 * @returns {string[]} Array of IDs
 */
$(...).sortable('toArray', options);

interface SortableOptions {
  appendTo?: string | Element;        // Element to append helper to
  axis?: 'x' | 'y' | false;         // Constrain sorting to axis
  cancel?: string;                   // Selector for elements that cancel sorting
  classes?: object;                  // CSS classes to apply
  connectWith?: string;              // Selector for connected sortables
  containment?: string | Element | Array; // Containment boundary
  cursor?: string;                   // CSS cursor during sort
  cursorAt?: { top?: number, left?: number, right?: number, bottom?: number }; // Cursor position
  delay?: number;                    // Delay before sorting starts
  disabled?: boolean;                // Disable the sortable
  distance?: number;                 // Distance before sorting starts
  dropOnEmpty?: boolean;             // Allow dropping on empty lists
  forceHelperSize?: boolean;         // Force helper to have size
  forcePlaceholderSize?: boolean;    // Force placeholder to have size
  grid?: [number, number];           // Snap to grid coordinates
  handle?: string | Element;         // Handle selector for sorting
  helper?: 'original' | 'clone' | Function; // Helper element type
  items?: string;                    // Selector for sortable items
  opacity?: number;                  // Opacity of helper during sort
  placeholder?: string;              // Class name for placeholder
  revert?: boolean | number;         // Revert animation
  scroll?: boolean;                  // Enable scrolling during sort
  scrollSensitivity?: number;        // Distance from edge to start scrolling
  scrollSpeed?: number;              // Scroll speed
  tolerance?: 'intersect' | 'pointer'; // Sort tolerance
  zIndex?: number;                   // Z-index of helper during sort
}

Events:

sortactivate - Triggered when sorting starts on connected sortable
sortbeforeStop - Triggered before sorting stops
sortchange - Triggered when sort order changes
sortcreate - Triggered when sortable is created
sortdeactivate - Triggered when sorting stops on connected sortable
sortout - Triggered when item moves out of connected sortable
sortover - Triggered when item moves over connected sortable
sortreceive - Triggered when item is received from connected sortable
sortremove - Triggered when item is removed to connected sortable
sortsort - Triggered during sorting
sortstart - Triggered when sorting starts
sortstop - Triggered when sorting stops
sortupdate - Triggered when sort order changes and DOM position updates

Usage Examples:

// Basic sortable list
$('#sortable').sortable();

// Connected sortables
$('#list1, #list2').sortable({
  connectWith: '.connected-sortable'
});

// Handle sort events
$('#sortable').sortable({
  update: function(event, ui) {
    var order = $(this).sortable('toArray');
    console.log('New order:', order);
  }
});

// Serialize to form data
$('#sortable').sortable({
  stop: function() {
    var serialized = $(this).sortable('serialize');
    $.post('update-order.php', serialized);
  }
});

// Custom placeholder and helper
$('#sortable').sortable({
  placeholder: 'sort-highlight',
  helper: 'clone',
  opacity: 0.6
});

Mouse Widget Base

All interaction widgets inherit from the mouse widget, which provides common mouse handling:

interface MouseOptions {
  cancel?: string;                   // Selector for elements that cancel mouse interaction
  delay?: number;                    // Delay in milliseconds before interaction starts
  distance?: number;                 // Distance in pixels before interaction starts
}

Mouse Events:

Mouse widgets trigger standard jQuery UI widget events
All mouse interactions respect the cancel, delay, and distance options
Custom mouse handling can be implemented by extending $.ui.mouse

Types

// Common interaction event object
interface InteractionEvent {
  type: string;
  target: Element;
  currentTarget: Element;
  originalEvent: MouseEvent;
  helper?: jQuery;
  position?: { top: number, left: number };
  offset?: { top: number, left: number };
}

// Draggable-specific event object
interface DraggableEvent extends InteractionEvent {
  helper: jQuery;
  position: { top: number, left: number };
  offset: { top: number, left: number };
}

// Droppable-specific event object  
interface DroppableEvent extends InteractionEvent {
  draggable: jQuery;
}

// Resizable-specific event object
interface ResizableEvent extends InteractionEvent {
  size: { width: number, height: number };
  originalSize: { width: number, height: number };
  position: { top: number, left: number };
  originalPosition: { top: number, left: number };
}

// Selectable-specific event object
interface SelectableEvent extends InteractionEvent {
  selecting?: Element;
  selected?: Element;
  unselecting?: Element;
  unselected?: Element;
}

// Sortable-specific event object
interface SortableEvent extends InteractionEvent {
  item: jQuery;
  helper: jQuery;
  position: { top: number, left: number };
  offset: { top: number, left: number };
  sender?: jQuery;
  placeholder: jQuery;
}

// Utility types for coordinates and dimensions
interface Coordinates {
  top: number;
  left: number;
}

interface Dimensions {
  width: number;
  height: number;
}

interface Rectangle extends Coordinates, Dimensions {}