JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="//angularlight.org/bin/alight_0.12.last.min.js"></script>
<div al-app="main" al-init="visible=true">
  You can click (tap), press (long click), or pull the box to left or right.
  <div class="box" :style.background-color="bgcolor"
    @tap="onTap()" @press="onTap(true)" @pan="onPan($event)"
    :style.left="x+'px'" :style.top="y+'px'">
    {{x}}x{{y}}
  </div>
</div>

CSS

.box {
  border: 1px solid blue;
  height: 100px;
  width: 100px;
  position: fixed;
  transition: background-color 0.2s;
}

JavaScript

function main(scope) {
	scope.bgcolor = '';
	scope.onTap = function(press) {
    scope.bgcolor = press?'green':'red';
    setTimeout(function() {
    	scope.bgcolor = '';
      scope.$scan();
    }, 100);
  }

  scope.x = 50;
	scope.y = 50;
 	var lastX = 0, lastY = 0;
	scope.onPan = function(e) {
  	var h = e.hammer;
    scope.x += h.deltaX - lastX;
    scope.y += h.deltaY - lastY;
    lastX = h.deltaX;
    lastY = h.deltaY;

    if(h.isFinal) {
    	lastX = 0;
      lastY = 0;
    }
  }
};

// events @tap, @pan, @press
['tap', 'pan', 'press'].forEach(function(eventName) {
  alight.hooks.eventModifier[eventName] = {
    event: eventName,
    init: function(scope, element) {
      var h = new Hammer(element, {});
      h.on(eventName, function(ev) {
        var e = new CustomEvent(eventName);
        e.hammer = ev;
        element.dispatchEvent(e);
      });
      scope.$watch('$destroy', function() {
        h.destroy();
      });
    }
  }
});