Draggable FAB

<!--
  Pointer drag alone would strand keyboard users, so the arrow keys move it too -
  a drag handle that only answers to the mouse is not operable. touch-none keeps
  a drag from also scrolling the page under the finger.
-->
<button type="button" aria-label="Quick add, draggable - use arrow keys to move" class="fab-drag fixed bottom-6 right-6 z-40 inline-flex h-14 w-14 cursor-grab touch-none items-center justify-center rounded-full bg-blue-600 text-white shadow-[0_12px_28px_-8px_rgba(15,23,42,0.45)] hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white active:cursor-grabbing dark:bg-blue-500 dark:hover:bg-blue-400 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950">
  <svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><circle cx="9" cy="6" r="1.6" /><circle cx="15" cy="6" r="1.6" /><circle cx="9" cy="12" r="1.6" /><circle cx="15" cy="12" r="1.6" /><circle cx="9" cy="18" r="1.6" /><circle cx="15" cy="18" r="1.6" /></svg>
</button>

<script>
  document.querySelectorAll('.fab-drag').forEach(function (button) {
    var x = 0, y = 0, dragging = false, sx = 0, sy = 0, ox = 0, oy = 0;
    function apply() { button.style.transform = 'translate(' + x + 'px, ' + y + 'px)'; }
    button.addEventListener('pointerdown', function (e) { dragging = true; sx = e.clientX; sy = e.clientY; ox = x; oy = y; button.setPointerCapture(e.pointerId); });
    button.addEventListener('pointermove', function (e) { if (!dragging) return; x = ox + (e.clientX - sx); y = oy + (e.clientY - sy); apply(); });
    button.addEventListener('pointerup', function () { dragging = false; });
    button.addEventListener('keydown', function (e) {
      var step = 16;
      if (e.key === 'ArrowUp') { y -= step; e.preventDefault(); }
      else if (e.key === 'ArrowDown') { y += step; e.preventDefault(); }
      else if (e.key === 'ArrowLeft') { x -= step; e.preventDefault(); }
      else if (e.key === 'ArrowRight') { x += step; e.preventDefault(); }
      else return;
      apply();
    });
  });
</script>