<div id="rotate-area">
  <div id="angle-info">0&deg;</div>
  <svg id="arrow" viewbox="0 0 100 100">
    <polygon points="50,0 75,25 62.5,25 62.5,100 37.5,100 37.5,25 25,25" fill="#29e"></polygon>
  </svg>
</div>

.draggable {
  touch-action: none;
  user-select: none;
}

var angle = 0

interact('#rotate-area').gesturable({
  onmove: function (event) {
    var arrow = document.getElementById('arrow')

    angle += event.da

    arrow.style.webkitTransform =
    arrow.style.transform =
      'rotate(' + angle + 'deg)'

    document.getElementById('angle-info').textContent =
      angle.toFixed(2) + '\u00b0'
  },
})

Gesture events are triggered when two pointers go down and are moved. In gesture events, page and client coordinates are the averages of touch coordinates and velocity is calculated from these averages. The events also have the following properties:

Remember to use CSS touch-action: none to prevent the browser from panning when the user drags with a touch pointer, and user-select: none to disable text selection.