Drag.js

function Drag() {
  var that = this;
  this.positEl = function(pos) {
    pos.el.style.left = pos.left + 'px';
    pos.el.style.top = pos.top + 'px';
    pos.el.style.right = 'auto';
    pos.el.style.bottom = 'auto';
  }
  this.on = function(element, style, callback) {
    /*
    element = dom object(element); !обязательный параметр
    style = {} передаем в объекте любые стили, position: fixed или absolute
    callback = ф-ция которая будет вызываться при клике на елементе
    */
    var temp = {
      transition: ''
    };
    var s;
    //var delDragDefault, clickReset, positEl, initPos, dragStart, movaAt, movaUp;
    element._click = true; //проверка состояния захвата
    element.onmousedown = dragStart;
    element.ondragstart = delDragDefault;
    element.onclick = null;
    element.addEventListener('click', stopClick ,true)
    function stopClick(e) {
      e = e || window.event;
      if (!element._click) {
        e.preventDefault();
        e.stopPropagation();
        return;
      }
      if (callback != undefined) callback.call(element);
    }

    element.style.position = 'absolute';
    if (typeof(style) == 'object' && Object.keys(style).length != 0) {
      Object.assign(element.style, style);
    }

    function delDragDefault() {
      return false
    }

    function clickReset() {
      element._click = true;
    }

    function initPos(e) { //получаем координаты
      var coord = element.getBoundingClientRect();
      var ww = document.documentElement.clientWidth;
      var wh = document.documentElement.clientHeight;
      var w = coord.width;
      var h = coord.height;
      var l = coord.left;
      var t = coord.top;
      var shiftL = e.clientX - l;
      var shiftT = e.clientY - t;
      var shiftR = coord.right - e.clientX;
      var shiftB = coord.bottom - e.clientY;
      var startMouse = {
        x: e.clientX,
        y: e.clientY
      };
      var s = {
        l: shiftL,
        t: shiftT,
        r: shiftR,
        b: shiftB,
        h: h,
        w: w,
        ww: ww,
        wh: wh,
        smy: startMouse.y,
        smx: startMouse.x
      };
      return s
    }

    function dragStart(e) { //ф-ция перетаскивания
      e = e || window.event;
      temp.transition = element.style.transition;
      element.style.transition = '';
      s = initPos(e);
      element.onmouseup = movaUp; //удаляем перетаскивание
      document.addEventListener('mousemove', movaAt); //начало перетаскивания
    }

    function movaAt(e) { //вещаем перетаскивание
      e = e || window.event;
      if (e.clientX - s.smx == 0 && e.clientY - s.smy == 0) { //для IE (непонятно что)
        return;
      }
      if (e.clientX + s.r > s.ww - 10) { //если выходит за рамки окна (право)
        if (e.clientX > s.smx) { //если движение право
          movaUp(); //удаляем перетаскивание
          return;
        }
      }
      if (e.clientY + s.b > s.wh - 10) { //если выходит за рамки окна (низ)
        if (e.clientY > s.smy) { //если движение низ
          movaUp(); //удаляем перетаскивание
          return;
        }
      }
      if (e.clientX - 10 < s.l || e.clientX < 10) { //если выходит за рамки окна (лево)
        if (e.clientX < s.smx) { // если движение лево лево
          movaUp(); //удаляем перетаскивание
          return;
        }
      }
      if (e.clientY - 10 < s.t || e.clientY < 10) { //если выходит за рамки окна (вверх)
        if (e.clientY < s.smy) { // если движение лево вверх
          movaUp(); //удаляем перетаскивание
          return;
        }
      }
      element._click = false; //запрещаем клик во время перетаскивания
      var left = e.clientX - s.l;
      var top = e.clientY - s.t;
      var right = s.ww - e.clientX - s.r;
      var bottom = s.wh - e.clientY - s.b;
      var pos = {
        el: element,
        left: left,
        top: top,
        bottom: bottom,
        right: right,
        width: s.w,
        height: s.h,
        mouse: {x:e.clientX, y:e.clientY}
      }
      that.positEl(pos)
      element.addEventListener('click', movaUp) //если объект прилип к курсору при перетаскивании, при клике удаляемперетаскивание
    }

    function movaUp() { //удаляем перетаскивание
      document.removeEventListener('mousemove', movaAt);
      element.removeEventListener('click', movaUp);
      element.onmouseup = null;
      element.style.transition = temp.transition;
      setTimeout(() => clickReset())
    }
  }
}

var drag = new Drag();
example https://jsfiddle.net/byvb7zof/2/