trck tracks the mouse/touch movement and apply to and especific element.

1. Install

npm install -S trck

2. Usage

import Trck from 'trck'

const track = new Trck({
    element: ".element-identifier",
    values:
        {
            x: true,
            y: true    
        },
    begin: function (element, {startX,startY}) { ... },
    progress: function (element, {startX, startY}, {currentX, currentY}) { ... },
    complete: function (element, {startX, startY}, {endX, endY}) { ... }

});

element

The identifier of the element that will be dragged.

values

An object that says which position will be watched. Use x: true to watch only the x position and y: true to watch the y position.

begin

Callback function to the mousedown/touchstart event. It receives as parameters the element, and an object with the x and y position on the start.

begin: function (element, beginPositions<Object>) {
    console.log(
        "Start positions: ",
        beginPositions.x,
        beginPositions.y
    );
}

//Start positions: 240, 120

progress

Callback function that is called in everytime mousemove/touchmove event is called. Receives the element and two objects as parameters: the start positions and the current positions.

progress: function (element, beginPositions<Object>, progressPositions<Object>) {
    console.log(
        "Start positions: ",
        beginPositions.x,
        beginPositions.y
    );
    console.log(
        "Progress positions: ",
        progressPositions.x,
        progressPositions.y
    );
}
//Start positions: 240, 120
//Progress positions: 360, 360

complete

Callback function that is called in the end of the movement. Receives the element and two objects as parameters: the start positions and the end positions.

complete: function (element, beginPositions<Object>, completePositions<Object>) {
    console.log(
        "Start positions: ",
        beginPositions.x,
        beginPositions.y
    );
    console.log(
        "Complete positions: ",
        completePositions.x,
        completePositions.y
    );
}
//Start positions: 240, 120
//Complete positions: 360, 360

3. Methods

getTransform()

Returns and object with the x and y position from the element.style.transform.