{"id":25184,"library":"drag-tabs","title":"drag-tabs","description":"A tiny utility for making tabs inside a container draggable. It emits drag, start, cancel, and end events but does not perform the actual dragging—leaving that to the consumer. The library is minimal and singleton per element. Current version is 3.0.0, released as ESM-only (breaking from v2.x). The project is maintained by bpmn-io and follows an irregular release cadence. Key differentiators: lightweight, no DOM manipulation beyond eventing, focuses solely on drag detection, and works with any tab-based layout. Alternatives like SortableJS provide full drag-and-drop out of the box.","status":"active","version":"3.0.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/bpmn-io/drag-tabs","tags":["javascript","tabs","drag","component","browser","browserify"],"install":[{"cmd":"npm install drag-tabs","lang":"bash","label":"npm"},{"cmd":"yarn add drag-tabs","lang":"bash","label":"yarn"},{"cmd":"pnpm add drag-tabs","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"DOM utility library","package":"min-dom","optional":false},{"reason":"Utility library for events and objects","package":"min-dash","optional":false}],"imports":[{"note":"v3 is ESM-only; CJS require() fails. Use import.","wrong":"const dragTabs = require('drag-tabs')","symbol":"default","correct":"import dragTabs from 'drag-tabs'"},{"note":"Default export is a function; there is no named export DragTabs.","wrong":"import { DragTabs } from 'drag-tabs';","symbol":"DragTabs","correct":"import dragTabs from 'drag-tabs';\nconst dragger = dragTabs(element, options);"},{"note":"EventEmitter interface is on the returned dragger instance, not exported.","wrong":"import { EventEmitter } from 'drag-tabs';","symbol":"EventEmitter","correct":"import dragTabs from 'drag-tabs';\nconst dragger = dragTabs(element, options);\ndragger.on('drag', handler);"}],"quickstart":{"code":"import dragTabs from 'drag-tabs';\n\nconst container = document.querySelector('.tab-container');\nconst dragger = dragTabs(container, {\n  selectors: {\n    tabsContainer: '.tabs',\n    tab: '.tab',\n    ignore: '.ignore'\n  }\n});\n\ndragger.on('drag', (context) => {\n  console.log('Dragging tab', context.dragTab, 'to index', context.newIndex);\n  // move the tab in DOM based on context.newIndex\n});\n\ndragger.on('cancel', (context) => {\n  console.log('Drag cancelled, reset tab to original position');\n});","lang":"javascript","description":"Creates a draggable tabs instance, listens to drag and cancel events, and logs the drag context."},"warnings":[{"fix":"Use import dragTabs from 'drag-tabs' instead of require().","message":"v3.0.0 turned the module into ESM-only. CommonJS require() will break.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Ensure your project uses compatible versions of min-dom and min-dash (>=5.0.0).","message":"v3.0.0 updated min-dom to 5.2.0 and min-dash to 5.0.0, which may introduce breaking changes in those dependencies.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Migrate to ES module imports. Use an ESM-aware bundler.","message":"v1.0.0 declared ES modules; earlier versions used CommonJS. No further support for CJS builds.","severity":"deprecated","affected_versions":">=1.0.0 <3.0.0"},{"fix":"Listen to the 'drag' event and rearrange the tab elements in the DOM based on context.newIndex.","message":"The library does not perform actual DOM manipulation of tab order; it only fires events. You must handle moving tabs yourself.","severity":"gotcha","affected_versions":"*"},{"fix":"Call dragger.update() instead of creating a new instance if the tabs change.","message":"DragTabs is a singleton per element. Re-initializing on the same element will overwrite the previous instance.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Set \"type\": \"module\" in your package.json, or use .mjs extension for your file.","cause":"Using ESM import in a CommonJS environment (e.g., Node without \"type\": \"module\").","error":"SyntaxError: Cannot use import statement outside a module"},{"fix":"Use import dragTabs from 'drag-tabs' (without curly braces).","cause":"Using import { dragTabs } ... but the export is default, not named.","error":"TypeError: dragTabs is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}