index.html


<html lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">

		<title>Ractive Single finger Swipe Events</title>
		<style type="text/css">
			#swipe {
				width: 1800px;
				height: 1000px;
				position: fixed;
			}
		</style>
	</head>
	<body>
		<div id="container"></div>
		<script type="text/ractive" id="touchT">
			<div id="swipe" on-swipeleft="left" on-swiperight="right" on-swipeup="up" on-swipedown="down">
				<h1>{{direction}}</h1>
			</div>
		</script>
		<script src="./Ractive.min.js"></script>
		<script src="./Ractive-events-swipe.js"></script>
		<script>
			var ractive = new Ractive({
				el: '#container',
				template: '#touchT',
				data : {
					name: 'koti',
					direction: 'Please swipe screen with single finger'
				}
			});
			ractive.on({
				left: function(e){
					ractive.set('direction', 'You have swiped Left')
				},
				right: function(e){
					ractive.set('direction', 'You have swiped Right')
				},
				down: function(e){
					ractive.set('direction', 'You have swiped Down')
				},
				up: function(e){
					ractive.set('direction', 'You have swiped Up')
				}
			})	
		</script>
	</body>
</html>