Skip to content
/ dragjs Public

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

License

Notifications You must be signed in to change notification settings

bebraw/dragjs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

95 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Draggable with a specific handle

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

Contributors

Development

Run the available commands through deno task.

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.

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published