Dragjs NPM | npm.io

dragjs has been designed to make it easy to create JavaScript based drag interactions. This includes use cases such as draggable panels and different types of sliders. The idea is that you use the logic from this package to build your own components as it captures concerns such as mouse and touch handling.

Demonstrations

Simple draggable

import { draggable } from "dragjs";

const draggableElement = document.getElementById("draggable");

draggableElement && draggable({ element: draggableElement });

Draggable with a specific handle

import { draggable } from "dragjs";

const element = document.getElementById("draggabletwo");
const handle = element.children[0];

element && handle && draggable({ element, handle });

1D slider

import { slider } from "dragjs";

const onedContainer = document.getElementById("onedContainer");

onedContainer && slider({
  parent: onedContainer,
  "class": "oned",
  cbs: {
    begin: () => {
      log("2dslider: begin");
    },
    change: ({ x, pointer }) => {
      const newX = clamp(x * 100, 0, 100).toFixed(2) + "%";

      console.log("2dslider: " + newX);

      if (pointer) {
        pointer.style.left = newX;
      }
    },
    end: () => {
      log("2dslider: end");
    },
  },
});

2D slider

import { xyslider } from "dragjs";

const twodContainer = document.getElementById("twodContainer");

twodContainer && xyslider({
  parent: twodContainer,
  "class": "twod",
  cbs: {
    change: ({ x, y, pointer }) => {
      const newX = clamp(x * 100, 0, 100).toFixed(2) + "%";
      const newY = clamp(y * 100, 0, 100).toFixed(2) + "%";

      console.log("x: " + newX + ", y: " + newY);

      if (pointer) {
        pointer.style.left = newX;
        pointer.style.top = newY;
      }
    },
  },
});