dragjs

Simple utility to make it easier to implement drag based things (ie. sliders and such)

  • dragjs

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
dragjs
4320.13.32 years ago10 years agoMinified + gzip package size for dragjs in KB

Readme

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

Drag me!

import { draggable } from "dragjs";

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

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

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;
      }
    },
  },
});

Contributors

Development

Run the available commands through velociraptor (vr).
To publish, tag a release with the desired version (i.e. git tag 0.13.0) and then git push.

License

dragjs is available under MIT. See LICENSE for more details.