Bootstrap Drag and Drop

A lightweight Bootstrap-based drag and sort library for reorderable, nestable, and configurable drag/drop interfaces.

Installation

npm install @trilbdev/bootstrap-drag-and-drop

Import

import BootstrapDragAndDrop from '@trilbdev/bootstrap-drag-and-drop';
import '@trilbdev/bootstrap-drag-and-drop/css';

Basic usage

<div
  data-bdd-drag="true"
  data-bdd-mode="sort"
  data-bdd-axis="y"
  data-bdd-selector=".bdd-item"
>
  <div class="card bdd-item" data-bdd-item="true">Item 1</div>
  <div class="card bdd-item" data-bdd-item="true">Item 2</div>
  <div class="card bdd-item" data-bdd-item="true">Item 3</div>
</div>

<script type="module">
  import BootstrapDragAndDrop from '@trilbdev/bootstrap-drag-and-drop';
  import '@trilbdev/bootstrap-drag-and-drop/css';

  BootstrapDragAndDrop.autoInit();
</script>

You can also create an instance manually:

import BootstrapDragAndDrop from '@trilbdev/bootstrap-drag-and-drop';

new BootstrapDragAndDrop('#sortable-list', {
  mode: 'sort',
  axis: 'y',
  selector: '.bdd-item',
  onDrop: (container, items) => {
    console.log(items.map((item) => item.textContent.trim()));
  }
});

Data attribute API

Use data-bdd-drag="true" on the sortable container and data-bdd-item="true" on each draggable child.

Supported attributes

• data-bdd-drag="true" — enables drag behavior on the container.
• data-bdd-mode="sort" — drag mode. Supported values: sort and move.
• data-bdd-axis="y" — restricts movement to x, y, or both.
• data-bdd-selector=".bdd-item" — identifies draggable children.
• data-bdd-item="true" — marks a draggable item.
• data-bdd-handle=".drag-handle" — optional drag handle selector.
• data-bdd-disabled="true" — disables the area.
• data-bdd-container="body" — constrains movement to a specific container.
• data-bdd-block-x-axis="true" — locks horizontal movement.
• data-bdd-block-y-axis="true" — locks vertical movement.
• data-bdd-delay="200" — delay before drag starts.
• data-bdd-scroll-pixels="40" — scroll distance during drag.
• data-bdd-dragging-class="bdd-dragging" — class applied while dragging.
• data-bdd-connected-list="#other-list" — connects drag to another list.
• data-bdd-copy="true" — copies instead of moving items.
• data-bdd-sorting="false" — disables sorting animations.
• data-bdd-animation-duration="300" — animation duration in milliseconds.
• data-bdd-item-class="bdd-item" — item class used by the sort engine.
• data-bdd-nesting="true" — enables nested list support.
• data-bdd-nesting-depth="3" — limits nested depth.
• data-bdd-anchor-position="left" — sets the anchor handle position.
• data-bdd-delete-position="top-right" — sets the delete control position.

JavaScript options

new BootstrapDragAndDrop('#sortable-list', {
  container: 'body',
  blockXAxis: false,
  blockYAxis: false,
  delay: 0,
  disabled: false,
  dragHandle: '',
  scrollPixels: 40,
  draggingClass: 'bdd-dragging',
  connectedList: null,
  copy: false,
  sorting: true,
  enterPredicate: () => true,
  animationDuration: 300,
  itemClass: 'bdd-item',
  mode: 'sort',
  axis: 'both',
  selector: '.bdd-item',
  onDrop: (container, items) => {
    console.log('New order:', items.map((item) => item.textContent.trim()));
  }
});

Styling

The package ships with a default stylesheet companion:

import '@trilbdev/bootstrap-drag-and-drop/css';

The CSS includes the default drag styling, nested list rule, placeholder state, anchored item state, and control styling.

Features

• drag and reorder list items
• optional copy mode
• connected lists
• nested drag/drop list support
• configurable anchor and delete controls
• Bootstrap-friendly markup and styling

License

MIT