JSFiddle - React, Tailwind, and code Playground

by fredd man

HTML

<div id="mydivheader5">Arrastrar y soltar</div>
<script src="https://cdn.jsdelivr.net/npm/hammerjs"></script>

CSS

#mydivheader5 {
  border-radius: 15px;
  padding: 10px;
  cursor: move;
  
  background-color: #2196F3;
  color: #fff;
  position: absolute;
  top: 100px;
  left: 100px;
}

JavaScript

var mydivheader5 = document.getElementById('mydivheader5');
var hammer = new Hammer(mydivheader5);
var startX = 0;
var startY = 0;
var offsetX = 0;
var offsetY = 0;

hammer.on('panstart', function(event) {
  mydivheader5.style.opacity = '0.5';
  var rect = mydivheader5.getBoundingClientRect();
  startX = event.center.pageX;
  startY = event.center.pageY;
  offsetX = startX - rect.left;
  offsetY = startY - rect.top;
});

hammer.on('panmove', function(event) {
  var rect = mydivheader5.getBoundingClientRect();
  mydivheader5.style.left = (event.center.pageX - offsetX - rect.left) + 'px';
  mydivheader5.style.top = (event.center.pageY - offsetY - rect.top) + 'px';
});

hammer.on('panend', function(event) {
  mydivheader5.style.opacity = '1';
});