Drag And drop without target [es6]

drag.js

// This snippet of code is based on
// https://www.kirupa.com/html5/drag.htm
// https://stackoverflow.com/questions/36098039/javascript-move-element-with-mousemove-event-60-fps-requestanimationframe

const GetClient = (e) => {
  const { touches = [] } = e;
  const [touch] = touches;
  const client = touch || e;
  return client;
};

class Drag {
  constructor({ el = '', container = '' }) {
    this.state = {
      elSel: el,
      containerSel: container,
      el: undefined,
      container: undefined,
      active: false,
      currentX: 0,
      currentY: 0,
      initialX: 0,
      initialY: 0,
      xOffset: 0,
      yOffset: 0,
      raf: true,
    };
  }

  setState = (nState) => {
    this.state = Object.assign(this.state, nState);
  };

  init = () => {
    const { elSel, containerSel } = this.state;
    const el = document.querySelector(elSel);
    const container = document.querySelector(containerSel);

    this.setState({ el });
    this.setState({ container });

    container.addEventListener('touchstart', this.start, false);
    container.addEventListener('touchmove', this.move, false);
    container.addEventListener('touchend', this.end, false);

    container.addEventListener('mousedown', this.start, false);
    container.addEventListener('mousemove', this.move, false);
    container.addEventListener('mouseup', this.end, false);
  };

  setActive = (active) => {
    const { el } = this.state;
    // const scale = active ? 1.05 : 1;

    if (active) el.classList.add('-active');
    else el.classList.remove('-active');

    this.setState({
      active,
    });
  };

  start = (e) => {
    const { el } = this.state;
    if (e.target !== el) return;
    e.preventDefault();

    const { clientX, clientY } = GetClient(e);
    const { xOffset, yOffset } = this.state;

    let newX = 0;
    let newY = 0;

    newX = clientX - xOffset;
    newY = clientY - yOffset;

    this.setState({ initialX: newX });
    this.setState({ initialY: newY });

    this.setActive(true);
  };

  end = () => {
    const { currentX, currentY } = this.state;
    this.setState({ initialX: currentX, initialY: currentY });
    this.setActive(false);
  };

  move = (e) => {
    const { active, raf } = this.state;
    if (!active || !raf) return;
    e.preventDefault();

    const { clientX, clientY } = GetClient(e);
    const { initialX, initialY } = this.state;

    let currentX = 0;
    let currentY = 0;

    currentX = clientX - initialX;
    currentY = clientY - initialY;

    this.setState({
      currentX,
      currentY,
      xOffset: currentX,
      yOffset: currentY,
    });

    requestAnimationFrame(this.setTranslate);
  };

  setTranslate = () => {
    const { currentX, currentY, el } = this.state;
    this.setState({ raf: true });
    el.style.transform = `translate3d(${currentX}px, ${currentY}px, 0)`;
  };
}

export default Drag;