2.1.0 • Published 4 months ago
@blueprintui/crane v2.1.0
@blueprintui/crane (beta)
Simple and lightweight drag and drop Web Components and utilities.
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';
}
2.1.0
4 months ago
2.0.2
5 months ago
2.0.1
5 months ago
2.0.0
5 months ago
1.18.1
9 months ago
1.18.0
9 months ago
1.16.2
10 months ago
1.16.1
10 months ago
1.16.0
10 months ago
1.18.2
7 months ago
1.17.2
10 months ago
1.17.1
10 months ago
1.17.0
10 months ago
1.15.2
11 months ago
1.17.4
10 months ago
1.17.3
10 months ago
1.15.0
11 months ago
1.15.1
11 months ago
1.14.1
1 year ago
1.13.2
1 year ago
1.14.0
1 year ago
1.13.1
1 year ago
1.13.0
1 year ago
1.14.3
12 months ago
1.14.2
12 months ago
1.13.3
1 year ago
1.10.5
1 year ago
1.10.4
1 year ago
1.10.3
1 year ago
1.12.0
1 year ago
1.11.1
1 year ago
1.10.2
1 year ago
1.10.6
1 year ago
1.11.0
1 year ago
1.9.1
1 year ago
1.8.2
1 year ago
1.6.4
1 year ago
1.9.0
1 year ago
1.8.1
1 year ago
1.6.3
1 year ago
1.8.0
1 year ago
1.7.1
1 year ago
1.6.2
1 year ago
1.7.0
1 year ago
1.6.8
1 year ago
1.6.7
1 year ago
1.9.3
1 year ago
1.6.6
1 year ago
1.9.2
1 year ago
1.8.3
1 year ago
1.6.5
1 year ago
1.10.1
1 year ago
1.10.0
1 year ago
1.6.1
1 year ago
1.6.0
1 year ago
1.5.1
1 year ago
1.5.0
1 year ago
1.4.0
1 year ago
1.3.1
1 year ago
0.0.0
1 year ago