JSFiddle - React, Tailwind, and code Playground

by fredd man

HTML

<div id="mydivheader5" style="position: absolute; top: 300px; left: 0px; cursor: move; z-index: 10; border-radius: 15px; padding: 10px; background-color: #2196F3; color: #fff;">
  Arrastra aquí
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script>
  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)';
  });
</script>