JSFiddle - React, Tailwind, and code Playground
by Muhammad Nugroho
HTML
<head>
<title>Picture Organiser — Shiny Demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="styles/screen.css">
<link rel="stylesheet" href="/styles/panel.css">
</head>
<body>
<img src="https://raw.githubusercontent.com/github-adi/shinydemos/master/demos/picture-organizer/images/1.jpg" alt="Image 1">
<img src="https://raw.githubusercontent.com/github-adi/shinydemos/master/demos/picture-organizer/images/2.jpg" alt="Image 2">
<img src="https://raw.githubusercontent.com/github-adi/shinydemos/master/demos/picture-organizer/images/3.jpg" alt="Image 3">
<img src="https://raw.githubusercontent.com/github-adi/shinydemos/master/demos/picture-organizer/images/4.jpg" alt="Image 4">
<script src="/scripts/modernizr.js"></script>
<script src="/scripts/panel.js"></script>
<script src="scripts/options.js"></script>
<script src="scripts/script.js"></script>
<script>
function gestureHandler(element) {
// define a data structure to store our touchpoints in
this.coords = function(x,y) {
this.x = x;
this.y = y;
};
this.element = element;
this.store = [];
this.store[0] = new this.coords(-1,-1);
this.store[1] = new this.coords(-1,-1);
this.dx = 0;
this.dy = 0;
this.angle = 0;
this.size = 0.5;
var that = this;
this.element.addEventListener('touchstart', function(e) { e.preventDefault(); e.stopPropagation(); that.init(); that.gesture(e); }, true);
this.element.addEventListener('touchmove', function(e) { e.preventDefault(); e.stopPropagation(); that.gesture(e); }, true);
this.init = function() {
// reset stored values
this.store[0].x = this.store[0].y = this.store[1].x = this.store[1].y = -1;
// naive way of working out highest z-index?
var zIndex = 0; // just using positive indices
var images = document.getElementsByTagName('img');
for (var i = 0; i<images.length; i++) {
if (parseInt(images[i].style.zIndex,10) >= zIndex)...