@arayuvar/dragvar NPM

Dragvar

A minimalist library for implementing drag operations.
This library is supposed to be combined with a wrapper.
It simply sets an event on the target element and returns the calculated result of the drag operation.

The positioning of elements varies from app to app: translate, position: absolute or fixed, margin, and so on.
I have created a library that returns only the calculation result so that it can be processed freely depending on the environment.

Domo

check event

https://arayuvar.github.io/dragvar/demo/event/ (Github Pages)
https://codesandbox.io/s/cranky-snowflake-bcw4fv (CodeSandbox)
https://codepen.io/arayuvar/pen/MWXyaGx (CodePen)

drag element

https://arayuvar.github.io/dragvar/demo/transform/ (Github Pages)
https://codesandbox.io/s/dragvar-demo-transform-j3tzx5 (CodeSandbox)
https://codepen.io/arayuvar/pen/gOKraKG (CodePen)

Install

Package managers

Install with npm: npm install @arayuvar/dragvar
Install with Yarn: yarn add @arayuvar/dragvar

CDN

Link directly to dragvar.min.js on...

https://unpkg.com/browse/@arayuvar/dragvar/ (unpkg) https://cdn.jsdelivr.net/npm/@arayuvar/dragvar/ (jsdelivr)

<script src="https://unpkg.com/@arayuvar/dragvar/dist/dragvar.min.js"></script>

Usage

Initialize Dragvar with vanilla JS.

<div id="target" style="background-color:red;width:100px;height:100px"></div>
<script src="https://unpkg.com/@arayuvar/dragvar/dist/dragvar.min.js"></script>

const dragvar = new Dragvar({
  // ...options
  handle: document.getElementById("target"),
  on: [ // event
    ["dragstart", (event) => {
        console.log(event.type, event);
      }],
    ["drag", (event) => {
        console.log(event.type, event);
      }],
  ],
});

1. check event

This library does not modify the elements. It only returns hints (calculation results).
Please check it in the console. Below is the data you can get from a drag event.
In most cases, moveX and moveY are the numbers you need.

https://arayuvar.github.io/dragvar/demo/event/

{
  "data": {
    "clientX": 207,
    "clientY": 439,
    "event": {  // original mouse/touch event
      "isTrusted": true
    },
    "moveX": 15,
    "moveY": 4,
    "pageX": 207,
    "pageY": 439,
    "type": 1 // 1=mouse, 2=touch
  },
  "target": dragvarInstance,
  "type": "pointerdown" // event name
}

2. move the element

You can easily drag an element using moveX and moveY which can be obtained from the drag event.
This is a sample that uses the transform property to move an element.

https://arayuvar.github.io/dragvar/demo/transform/

// 1. Save origin position when dragging starts (originY, originX)
// 2. Add `moveX` and `moveY` to the saved origin (originX + data.moveX, originY + data.moveY)

let originX, originY;

new Dragvar({
  handle: HTMLElement,
  on: [
    ["dragstart", (event) => {
      // 1. Save origin position when dragging starts (originY, originX)
      const style = getComputedStyle(event.target.handle);
      const matrix = style.transform;
      const matches = matrix.match(/\s?matrix\s?\(.+,(.+?),(.+?)\)/);

      if (matches) {
        originX = Number(matches[1]);
        originY = Number(matches[2]);
      } else {
        originX = 0;
        originY = 0;
      }
    }],
    ["drag", (event) => {
      // 2. Add `moveX` and `moveY` to the saved origin (originX + data.moveX, originY + data.moveY)
      const dragvar = event.target;
      const data = event.data;
      const cssText = "transform:matrix(1,0,0,1," + (originX + data.moveX) + "," + (originY + data.moveY) + ")";
      dragvar.handle.style.cssText = cssText;
    }],
  ],
  threshold: 3,
});

Event (Hook and Filter)

Can be specified as an array in on at the time of instance creation.

Hook

It is a so-called event.

const dragvar = new Dragvar({
  on: [
    // [type, callback, options?]
    ["drag", (event) => console.log(event), {
      once: true,
      order: 1,
    },],
  ],
});

The same can be added with on().

// [type, callback, options?]
dragvar.on("drag", (event) => console.log(event), {
      once: true,
      order: 1,
    });

Filter

If you want to specify the value of a property dynamically, you can set a filter.
The program will call the filter function at the appropriate time to update the value of the property.

const dragvar = new Dragvar({
  on: [
    // [type, callback, options?]
    ["filter:disabled", (event) => {
      const currentValue = event.value;
      const filteredValue = true;
      // some process...
      return filteredValue;
    }, {
      order: 1,
    },],
  ],
});

The same can be added with on().

// [type, callback, options?]
dragvar.on("filter:disabled", (event) => console.log(event), {
      order: 1,
    });

Options

/**
 * Options when creating an instance.
 * 
 * behavior?: Define the behavior of the instance.
 * disabled?: If `true`, no drag operation is accepted.
 * handle: HTMLElement to which the drag operation is attached.
 * threshold?: Threshold in px for the start of a drag operation.
 * on?: can specify functions for Hook or Filter as an array.
 */
interface DragvarOptions {
  behavior?: number
  disabled?: 1 | 2
  handle: HTMLElement
  threshold?: number
  on?: Array<EventEntry | [EventType, EventCallback, EventOptions?,]>
}

handle

The HTML element that is the target of the drag operation.

new Dragvar({
  handle: document.getElementById("some"),
});

behavior

Specify with bitwise operators.

Type: number
Default: 3 (1 | 2)

new Dragvar({
  behavior: 1 | 2 | 4,
 // 1: Execute `event.preventDefault()` on mousedown or touchstart
 // 2: Execute `event.stopPropagation()` on mousedown or touchstart
 // 4: Check the disabled value every time while dragging. (The function is called on every `mousemove` or `touchmove`)
});

disabled

If true, no drag operation is accepted.
It's compatible with filter events. (filter:disabled)
You can use abort().

Type: boolean
Default: false

new Dragvar({
  disabled: true,
});

threshold

Threshold from mousedown or touchstart to start dragging.

Type: number
Default: 3 (3px)

new Dragvar({
  threshold: 3,
});

on

List of events to be set up.

Type: Array<[type, callback, options?,]>

new Dragvar({
  on: [
    // hook event
    ["drag", (event) => console.log(event), {
      once: true,
      order: 1,
    }],

    // filter event
    ["filter:disabled", (event) => {
      const currentValue = event.value;
      const filteredValue = true;
      // some process...
      return filteredValue;
    }, {
      once: true, // If true, it is discarded only once.
      order: 1, // The order in which events of the same type are registered. The smaller the number, the earlier the event is called.
    }],
  ],
});

Events

pointerdown

A mousedown or touchstart occurred on an element.

Data:

{
  "data": {
    "clientX": 207,
    "clientY": 439,
    "event": {  // original mouse/touch event
      "isTrusted": true
    },
    "pageX": 207,
    "pageY": 439,
    "type": 1 // 1=mouse, 2=touch
  },
  "target": dragvar,  // dragvar instance
  "type": "pointerdown" // event name
}

pointermove

A mousemove or touchmove occurred on an element.
Only between pointerdown and pointerup.

Data: Same as pointerdown.

pointerup

A mouseup or touchend occurred on an element.

Data: Same as pointerdown.

dragstart

Satisfied the threshold and started dragging.

Data: Same as pointerdown.

drag

A mousemove or touchmove occurred on an element.
Only between dragstart and dragend.

Data:

{
  "data": {
    "clientX": 207,
    "clientY": 439,
    "event": {  // original mouse/touch event
      "isTrusted": true
    },
    "moveX": 15,
    "moveY": 4,
    "pageX": 207,
    "pageY": 439,
    "type": 1 // 1=mouse, 2=touch
  },
  "target": dragvar,  // dragvar instance
  "type": "drag"
}

dragend

the drag operation has ended.

Data: Same as pointerdown.

abort

Executed abort().

Data:

{
  "target": dragvar,  // dragvar instance
  "type": "abort" // event name
}

destroy

Executed destroy().

Data: Same as abort.

Methods

abort()

Forcibly discontinue drugs.
The abort event fires.

dragvar.abort();

destroy()

Destroy the instance and detach events.
The destroy event fires.

dragvar.destroy();

on()

off()

Parameters: (type, callback, options: {once, order})

const callback = (event) => console.log(event), {
      order: 1,
    };

dragvar.on("drag", callback);
dragvar.off("drag", callback);

License

Dragvar is released under the MIT License. Have at it.

dragvar drag draggable typescript

@infinitebrahmanuniverse/nolb-_ara

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago