@blueprintui/crane (beta)

Simple and lightweight drag and drop Web Components and utilities.

• Documentation
• Stackblitz Demo

Install

NPM

npm install @blueprintui/crane

CDN

import 'https://cdn.jsdelivr.net/npm/@blueprintui/[email protected]/include/crane.js/+esm';

Usage

<bp-crane>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <bp-dropzone></bp-dropzone>
</bp-crane>

import '@blueprintui/crane/include/crane.js';

document.querySelector('bp-crane').addEventListener('bp-crane-drop', e => {
  e.detail.target.parentElement.insertBefore(e.detail.source, e.detail.target);
});

Components

• bp-crane
• bp-dropzone

Events

| Event | Description | Detail Return Type | | ---------------- | ---------------------------------------- | ------------------------ | | bp-crane-start | user starts dragging an item | BpDraggableChangeEvent | | bp-crane-enter | item enters valid drop target | BpDraggableChangeEvent | | bp-crane-leave | item leaves valid drop target | BpDraggableChangeEvent | | bp-crane-end | drag operation ends | BpDraggableChangeEvent | | bp-crane-drop | item is dropped on a valid drop target | BpDraggableChangeEvent | | bp-crane-over | item is dragged over a valid drop target | BpDraggableChangeEvent | | bp-crane-drag | item is dragged | BpDraggableChangeEvent |

Event Detail

interface BpDraggableChangeEvent {
  source?: HTMLElement;
  target?: HTMLElement;
  type: 'start' | 'drag' | 'over' | 'drop' | 'enter' | 'leave' | 'end';
  interaction?: 'pointer' | 'key';
}