Dialog-draggable

Makes the HTML element <dialog> draggable.

Live demo

Quick start

Install

$ pnpm add dialog-draggable
# yarn add dialog-draggable
# npm i dialog-draggable

make all <dialog> elements draggable

import { makeDialogDraggable } from 'dialog-draggable';

makeDialogDraggable();

Trigger dragging by inner dom

add data-dialog-draggable attribute to inner tags, so they can trigger the outer <dialog> dragging. Notice <button> and <a> tags are excluded.

<!-- Example -->
<dialog id="dialog">
  <nav data-dialog-draggable>
    Dialog title
    <!-- buttons won't trigger dragging -->
    <button type="button">X</button>
  </nav>
  <!-- dialog contents -->
</dialog>

Develop

# nvm use
$ corepack enable
$ pnpm install --frozen-lockfile

local dev preview

pnpm dev

test

pnpm test

---

Supported by JetBrains open source program.