Make a div draggable – movable.

drag.js

const getNumberFromCss = ( rules, cssName ) => parseInt( rules[cssName], 10 );

export const makeDraggable = ( element ) =>
{
    const initial =
    {
        x : null,
        y : null,
        top : null,
        right : null
    };

    const mousemove = event =>
    {
        const deltaX = event.x - initial.x;
        const deltaY = event.y - initial.y;

        element.style.right = initial.right - deltaX;
        element.style.top = initial.top + deltaY;
    };

    const mouseup = () =>
    {
        document.removeEventListener( "mousemove", mousemove );
        document.removeEventListener( "mouseup", mouseup );
    };

    const mousedown = event =>
    {
        const coordinates = element.getBoundingClientRect();
        const bodyStyle = getComputedStyle( document.body );

        const offset = ["margin", "padding", "border"].reduce( ( acc, cssName ) =>
        {
            return acc + ["right", "left"].reduce( ( acc, side ) =>
            {
                return acc + getNumberFromCss( bodyStyle, `${cssName}-${side}` );
            }, 0 );
        }, 0 );

        initial.x = event.x;
        initial.y = event.y;
        initial.top = coordinates.top;
        initial.right = document.body.offsetWidth + offset - coordinates.right;

        element.style.right = initial.right;
        element.style.top = initial.top;

        document.addEventListener( "mousemove", mousemove );
        document.addEventListener( "mouseup", mouseup );
    };

    element.addEventListener( "mousedown", mousedown );

    return {
        mousedown,
        mousemove,
        mouseup
    };
};


export const makeUndraggable = ( element, { mousedown, mousemove, mouseup } ) =>
{
    element.removeEventListener( "mousedown", mousedown );
    document.removeEventListener( "mousemove", mousemove );
    document.removeEventListener( "mouseup", mouseup );
};