Drag and scroll in plain JS

drag-scroll.js

var element,
    isPushed = false,
    scrollTop = 0,
    scrollLeft = 0,
    lastClientX = 0,
    lastClientY = 0;

var DragScroll = {

  onMouseDown : function(e) {
    element = e.target;
    isPushed = true;
    element.addEventListener("mousemove", this.onMouseMove);
    element.addEventListener("mouseup", this.onMouseUp);
    element.addEventListener("mouseleave", this.onMouseUp);
    lastClientX = e.clientX;
    lastClientY = e.clientY;
    e.preventDefault();
    e.stopPropagation();
  },

  onMouseUp : function() {
    if (isPushed) {
      element.removeEventListener("mousemove", this.onMouseMove);
      element.removeEventListener("mouseup", this.onMouseUp);
      element.removeEventListener("mouseleave", this.onMouseUp);
      isPushed = false;
    }
  },

  onMouseMove : function(e) {
    if (isPushed) {
      element.scrollLeft -= (e.clientX - lastClientX);
      element.scrollTop -= (e.clientY - lastClientY);
      lastClientX = e.clientX;
      lastClientY = e.clientY;
    }
  }

};

// INIT
document.querySelector(".draggable").addEventListener("mousedown", DragScroll.onMouseDown, false);

styles.scss

.draggable {
  cursor: move;
  cursor: -webkit-grab;
  &:active {
    cursor: -webkit-grabbing;
  }
}