$ show adopted-ember-addons/ember-sortable
ember-sortable is an Ember.js addon providing sortable UI primitives for drag-and-drop reordering of lists, grids, and tables. It implements modifiers (sortable-group, sortable-item, sortable-handle) that attach drag-and-drop behavior to DOM elements, with built-in support for mouse, touch, and keyboard input. The architecture centers around a service (ember-sortable-internal-state) that manages state between sortable groups and items, enabling features like visual feedback during drag, automatic container scrolling, and accessibility support including screen reader announcements and keyboard navigation. The library follows Ember addon conventions with a modular structure, clear separation of concerns, and comprehensive test coverage.
The LLM identified 2 files worth highlighting for reuse:
Encapsulates scroll position logic for both window and element containers, providing bounds-aware scrollTop/scrollLeft methods with automatic clamping. Handles the complex differences between window and element scrolling APIs (e.g., using document.documentElement for viewport size vs. element.getBoundingClientRect for position) and includes automatic bounds checking to prevent invalid scroll positions. Zero dependencies, pure DOM/BOM APIs, making it easily extractable to any web project.
Finds the nearest scrollable ancestor element by walking up the DOM and checking overflow properties. Correctly handles CSS positioning nuances by skipping static parents when the element is absolutely positioned (since static elements are not containing blocks for absolutely positioned children). Returns the document as a fallback when no scroll parent is found. Zero dependencies, pure DOM API, solving a common DOM traversal problem with subtle CSS logic that's easy to implement incorrectly.