基于touch.js 左滑删除功能

左滑删除功能

完整代码如下： （touch.js）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>touch事件</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<script src='./js/jquery-1.9.0.min.js'></script>
		<script src="./js/touch.min.js"></script>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			.main {
				width: 100%;
				height: auto;
				overflow: hidden;
				position: relative;
			}
			.list {
				height: 70px;
				margin-bottom: 10px;
				white-space: nowrap;
				position: relative;
			}
			.left {
				display: inline-block;
				width: 100%;
				height: 70px;
				background: #eeeeee;
				text-align: center;
				line-height: 70px;
			}
			.right {
				display: inline-block;
				width: 100px;
				height: 70px;
				background: #eb3639;
				color: #ffffff;
				text-align: center;
				line-height: 70px;
				margin-left: -5px;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="list">
				<div class="left">左边</div>
				<div class="right">右边</div>
			</div>
			<div class="list">
				<div class="left">左边</div>
				<div class="right">右边</div>
			</div>
			<div class="list">
				<div class="left">左边</div>
				<div class="right">右边</div>
			</div>
			<div class="list">
				<div class="left">左边</div>
				<div class="right">右边</div>
			</div>
		</div>
	</body>
	<script>
		$(function () {
			function slider( item ) {
				var obj = item.obj;
				if ( !obj.is('.list') ) {
					obj = obj.parent('.list');
				}
				$('.list').not(obj).animate({
					left: 0
				},'normal');

				obj.animate({
					left: item.left
				}, 'normal');
			}
			//左滑
			touch.on(document, 'swipeleft', function ( ) {
				slider({
					obj: $(this),
					left: '-100px'
				})
			});
			//右滑
			touch.on(document, 'swiperight', function () {
				slider({
					obj: $(this),
					left: 0
				})
			})
		})
	</script>
</html>

　　效果图：