@blueprintui/crane

@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/crane@0.0.0/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';
}