Usuwanie elementu za pomocą swipe

Pokażę jak ciekawie zaimplementować usuwanie elementów listy na urządzeniach mobilnych. Wykorzystamy do tego gest tzw. swipe. Najpierw musimy pobrać plugin do jQuery touchSwipe, bo jego będziemy używać. Kod html wygląda następująco:

<!DOCTYPE HTML>
<html>
    <head>  
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="css/main.css" type="text/css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
        <script type="text/javascript" src="js/main.js"></script>  
        <title>Usuwanie elementu za pomocą swipe</title>
    </head>
    <body>
		<div>
			<ul id="items">
				<li data-id="1">Item 1</li>
				<li data-id="2">Item 2</li>
				<li data-id="3">Item 3</li>
				<li data-id="4">Item 4</li>
			</ul>
			
			<div id="box">
				Czy na pewno chcesz usunąć item <span id="nr_item"></span>?<br>
				<a id="yes" href="#">Tak</a> <a id="no" href="#">Nie</a>
			</div>
		</div>		
   </body>
</html>

Jak widać najpierw załączamy jQuery, plugin i plik main.js, w którym będziemy pisać kod naszego skryptu. Używamy też pliku main.css, aby wystylować trochę elementy, które będziemy używać (zawartość pliku poniżej).

body {
	font-family:Arial, Helvetica, sans-serif;
}
#items li {
	display:block;
	padding:10px;
	background:#eee;
	margin:5px 0 5px 0;
	cursor:pointer;
}
#items li:hover {
	background:#ddd;
}
#items {
	padding:0;
	margin:0;
}
#box {
	background:#eee;
	border:1px solid #ddd;
	width: 30%;
	height:20%;
	padding:20px;
	top:10%;
	left:50%;
	margin:0 auto;
	max-width: 100%;
	text-align: center;
	display:none;
}
@media only screen and (max-width: 767px) {
	#box {
		width:50%;
	}
}

Opiszę teraz pokrótce efekt jaki chcemy osiągnąć. Jeśli przesuniemy na którymś elemencie listy w prawo (tzw. swipe right) to ma pojawić się okienko potwierdzające usunięcie elementu. W zależności czy się zgodzimy odpowiedni element znika z listy lub nie. Kod javascript realizujący to zadanie poniżej. Jak widać przechwytujemy zdarzenie swipeRight, odczytujemy data-id elementu i pokazujemy box z komunikatem. Potem w zależności, który link został kliknięty usuwamy element lub nie.

$(function() {
	$("#items li").swipe( {
		swipeRight:function(event, direction, distance, duration, fingerCount) {
			var $this = $(this), item_nr = $this.data('id');
			$('#nr_item').text(item_nr);
			$('#box').show();
			
		},
		threshold:0
	});
	$('#yes').on('click', function() {
		$('#box').hide();
		$('#items li[data-id='+($('#nr_item').text())+']').hide().remove();
	});
	$('#no').on('click', function() {
		$('#box').hide();
	});
});

Jak to działa w praktyce można zobaczyć tutaj.