Draggins NPM | npm.io

Install

NPM:

npm install draggins

CDN:

<script src="https://unpkg.com/draggins/dist/index.umd.js"></script>

Usage

As module:

import { draggable } from 'draggins';

Then:

draggable('.draggable');

You can use it easily with Svelte:

<script>
  import { draggable } from 'draggins';
  // discard return value as svelte expects its own api:
  const isDraggable = (el) => void draggable(el);
</script>
<div use:isDraggable>I'm draggable</div>

More examples:

const dragApi = draggable('.draggable', {
  onDragStart: (position) => console.log(position),
  onDragEnd: (position) => console.log(position),
});
document.getElementById('toggle').addEventListener('click', (e) => {
  dragApi.setDraggableState(e.target.checked);
});

Docs:

/**
 * Make things draggable
 * @param element can be a range of different inputs, see https://github.com/CompactJS/uea
 * @param options draggable options
 * @returns returns api
 */
function draggable(
  element: string | HTMLElement | HTMLElement[] | HTMLCollection | NodeList,
  options?: DraggableOptions
): DraggableAPI;

interface DraggableAPI {
  /**
   * disable / enable dragging
   * @param state draggable
   */
  setDraggableState(state: boolean): void;
}

interface DraggableOptions {
  /**
   * limit dragging to a boundary box
   * set it to 'null' to disable
   * defaults to window width/height
   */
  limit?: { x: { min: number; max: number }; y: { min: number; max: number } };
  /**
   * stop dragging when mouse is out of boundaries
   * @default false
   */
  cancelWhenOutOfBoundary?: boolean;
  /**
   * draggins by default changes z-index to 99
   * @default false
   */
  dontTouchStyles?: boolean;

  /**
   * Run when dragging has started
   */
  onDragStart?: (position: { x: number; y: number }) => void;

  /**
   * Run when dragging has ended
   */
  onDragEnd?: (position: { x: number; y: number }) => void;
}

Run tests

npm run test

Contact

👤 Timo Bechtel

🤝 Contributing

Contributions, issues and feature requests are welcome!

Check issues
Fork the Project
Create your Feature Branch (git checkout -b feat/AmazingFeature)
Test your changes npm run test
Commit your Changes (git commit -m 'feat: add amazingFeature')
Push to the Branch (git push origin feat/AmazingFeature)
Open a Pull Request

Commit messages

This project uses semantic-release for automated release versions. So commits in this project follow the Conventional Commits guidelines. I recommend using commitizen for automated commit messages.