<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/crane/include/draggable-list.js/+esm';

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

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

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