A tab dragging component
npm install drag-tabs> As of version 1.0.0 this library exposes ES modules. Use an ES module aware transpiler such as Webpack, Rollup or Browserify + babelify to bundle it for the browser.

A tiny utility that makes tabs inside a container draggable.

* Makes elements inside a drag container draggable
* Supports ignored elements
* Emits drag, start, cancel and end events
* Does not perform actual dragging
* Singleton (per element)
Given you got an element with the following HTML markup:
``javascript`
var $el = (
);
Create the dragger:
`javascript`
var dragger = dragTabs($el, {
selectors: {
tabsContainer: '.my-tabs-container',
tab: '.my-tab',
ignore: '.ignore-me'
}
});
Listen to drag events emitted via the DragTabs instance and use the updates to move the tabs to the appropriate position:
`javascript
dragger.on('drag', function(context) {
var dragTab = context.dragTab,
newIdx = context.newIdx;
// move the tab to the new position
});
// move the tab to the initial position
dragger.on('cancel', function(context) {});
`
The DragTabs instance is an event emitter that fires the following events:
- start: tab dragging startsdrag
- : fired on every position updateend
- : always fired at the end of the dragcancel
- : only fired when the dragging is canceled
The events drag, end and cancel are emitted with the following context:
`js`
{
dragTab: {HTMLElement},
newIndex: {Number}
}
The event start is fired with the following context:
`js`
{
dragTab: {HTMLElement},
initialIndex: {Number}
}
To trigger a manual update on the DragTabs instance, i.e. because the displayed tabs change call DragTabs#update:
`javascript`
dragger.update();
```
npm run test
MIT