README

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.

drag-tabs

A tiny utility that makes tabs inside a container draggable.

Features

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)

How it Works

Given you got an element with the following HTML markup:

var $el = (
  <div>
    <ul class="my-tabs-container">
      <li class="my-tab"></li>
      <li class="my-tab"></li>
      <li class="my-tab ignore-me"></li>
    </ul>
  </div>
);

Create the dragger:

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:

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) {});

Emitted Events

The DragTabs instance is an event emitter that fires the following events:

start: tab dragging starts
drag: fired on every position update
end: always fired at the end of the drag
cancel: only fired when the dragging is canceled

The events drag, end and cancel are emitted with the following context:

{
  dragTab: {HTMLElement},
  newIndex: {Number}
}

The event start is fired with the following context:

{
  dragTab: {HTMLElement},
  initialIndex: {Number}
}

Manually Update Dragger

To trigger a manual update on the DragTabs instance, i.e. because the displayed tabs change call DragTabs#update:

dragger.update();

How to Test

npm run test

License

MIT

Usage no npm install needed!