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;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
  position: absolute;
  top: 100px;
  left: 100px;
}

JavaScript

var mydivheader5 = document.getElementById('mydivheader5');
var hammer = new Hammer(mydivheader5);

hammer.on('panstart', function() {
  mydivheader5.style.opacity = '0.5';
});

hammer.on('panmove', function(event) {
  mydivheader5.style.transform = 'translate(' + event.deltaX + 'px, ' + event.deltaY + 'px)';
});

hammer.on('panend', function(event) {
  mydivheader5.style.opacity = '1';
  var transformValues = mydivheader5.style.transform.match(/-?\d+/g);
  var currentLeft = parseInt(mydivheader5.style.left) || 0;
  var currentTop = parseInt(mydivheader5.style.top) || 0;
  mydivheader5.style.left = (currentLeft + parseInt(transformValues[0])) + 'px';
  mydivheader5.style.top = (currentTop + parseInt(transformValues[1])) + 'px';
  mydivheader5.style.transform = 'translate(0px, 0px)';
});