Crane

Simple and lightweight drag and drop components and utilities.

npm install @blueprintui/crane

GitHub

Stackblitz

NPM

Drag and Drop Lists

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/[email protected]/include/crane.js/+esm';

  document.querySelector('bp-crane').addEventListener('bp-crane-drop', e => {
    e.detail.target.parentElement.insertBefore(e.detail.source, e.detail.target);
  });
</script>
<bp-crane>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <bp-dropzone></bp-dropzone>
</bp-crane>

Multi List

<bp-crane>
  <button>1</button>
  <button>2</button>
  ...
</bp-crane>
<bp-divider></bp-divider>
<bp-crane>
  <button>5</button>
  <button>6</button>
  ...
</bp-crane>

Handles

<bp-crane>
  <div>1 <button bp-crane="handle"></button></div>
  <div>2 <button bp-crane="handle"></button></div>
  <div>3 <button bp-crane="handle"></button></div>
  <div>4 <button bp-crane="handle"></button></div>
  <bp-dropzone></bp-dropzone>
</bp-crane>