How to drag an element freely on the page with pure javascript?

Question

I wonder how to move an element on the page freely with javascript without frameworks, it would just drag and drop in any corner of the page

Answer 1

follows a response based on a response from Sergio (but without the use of Libraries and Frameworks (a.k.a jQuery).

var Draggable = function (elemento) {
  var that = this;
  this.elemento = elemento;
  this.posX = 0;
  this.posY = 0;
  this.top = 0;
  this.left = 0;
  this.refMouseUp = function (event) {
    that.onMouseUp(event);
  }

  this.refMouseMove = function (event) {
    that.onMouseMove(event);
  }

  this.elemento.addEventListener("mousedown", function (event) {
    that.onMouseDown(event);
  });
}

Draggable.prototype.onMouseDown = function (event) {
  this.posX = event.x;
  this.posY = event.y;

  this.elemento.classList.add("dragging");
  window.addEventListener("mousemove", this.refMouseMove);  
  window.addEventListener("mouseup", this.refMouseUp);  
}

Draggable.prototype.onMouseMove = function (event) {
  var diffX = event.x - this.posX;
  var diffY = event.y - this.posY;
  this.elemento.style.top = (this.top + diffY) + "px";
  this.elemento.style.left = (this.left + diffX) + "px";
}

Draggable.prototype.onMouseUp = function (event) {
  this.top = parseInt(this.elemento.style.top.replace(/\D/g, '')) || 0;
  this.left = parseInt(this.elemento.style.left.replace(/\D/g, '')) || 0;
  this.elemento.classList.remove("dragging");
  window.removeEventListener("mousemove", this.refMouseMove); 
  window.removeEventListener("mouseup", this.refMouseUp);  
}

var draggables = document.querySelectorAll(".draggable");
[].forEach.call(draggables, function (draggable, indice) {
  new Draggable(draggable);
});

html, body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.bloco {
  float: left;
  margin: 5px;
  border-radius: 5px;
  background-color: white;
  box-shadow: 0px 0px 5px black;
  width: 128px;
  height: 128px;
  background-image: url('http://image.flaticon.com/icons/svg/96/96958.svg');
  background-size: calc(100% - 10px);
  background-position: center;
  background-repeat: no-repeat;
}

.draggable {
  position: relative;
  top: 0px;
  left: 0px;
  transition: transform 0.3s linear z-index 0.3 linear;
  z-index: 0;
}

.dragging {
  transform: scale(1.1);
  z-index: 999;
}

<div class="draggable bloco"></div>
<div class="draggable bloco"></div>

Answer 2

To drag an element I use the events onmousedown, onmousemove and onmouseup (I declare the last two in window), if necessary more events can be used.

To drag the element from any point it is necessary to subtract the positions of the mouse pointer by the positions of the element when starting to hold itlo, and as soon as the element is dragged it will get the mouse pointer position subtracted by the value obtained from the first calculation made when the element was held, for example, in the event onmousedown.

Edit: changed the property "client" + ("X" || "Y") for "page" + "("X" || "Y"), because it returns the actual coordinates of the page and I had not noticed it.

var dragMe = document.getElementById("drag_me"),
  /* o x inicial do drag*/
  dragOfX = 0,
  /* o y inicial do drag */
  dragOfY = 0;

/* ao segurar o elemento */
function dragStart(e) {
    /* define o x inicial do drag */
    dragOfX = e.pageX - dragMe.offsetLeft;
    /* define o y inicial do drag */
    dragOfY = e.pageY - dragMe.offsetTop;
    
    /* adiciona os eventos */
    addEventListener("mousemove", dragMove);
    addEventListener("mouseup", dragEnd);
}
    
/* ao ser arrastado */
function dragMove(e) {
    /* atualiza a posição do elemento */
    dragMe.style.left = (e.pageX - dragOfX) + 'px';
    dragMe.style.top = (e.pageY - dragOfY) + 'px';
}
    
/* ao terminar o drag */
function dragEnd() {
    /* remove os eventos */
    removeEventListener("mousemove", dragMove);
    removeEventListener("mouseup", dragEnd);
}
    
/* adiciona o evento que começa o drag */
dragMe.addEventListener("mousedown", dragStart);

#drag_me {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    position: absolute;
}

<div id="drag_me">Drag me</div>