How to drag an element freely on page with pure javascript? [duplicate]

Navigation
3

I would like to know how to move an element on the page freely with javascript without frameworks, it would just drag and drop anywhere on the page

    
asked by anonymous 10.08.2016 / 17:43

2 answers

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 as it begins to hold it, and as soon as the element is dragged it will get the position of the mouse pointer subtracted by the value obtained from the first calculation made when the element was held, for example, in the onmousedown event.

Edit : I changed the property "client" + ("X" || "Y") to "page" + "("X" || "Y") because it returns the actual coordinates of the page and I did not realize 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>
    
10.08.2016 / 18:31
3

follows a response based on a response from Sergio (however 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>
    
10.08.2016 / 18:24
Compare rows between rows between two data frames? Array copy in ADVPL