Swipe to show checkbox

I've seen this code that I like that enables you to swipe to reveal a delete button in a kind of list view, shown here: http://ankane.github.io/swipeout/demo.html

Now I have a list view displayed in divs like this jsfiddle

<div id="maincontent">
    <div id="title">Title 1</div>
    <div id="delbutton"><input type="checkbox"></div>
</div>
<div id="maincontent">
        <div id="title">Title 2</div>
    <div id="delbutton"><input type="checkbox"></div>
</div>
<div id="maincontent">
    <div id="title">Title 3</div>
    <div id="delbutton"><input type="checkbox"></div>
</div>
<div id="maincontent">
    <div id="title">Title 4</div>
    <div id="delbutton"><input type="checkbox"></div>
</div>
body{margin:0;}
#maincontent{width:100%; height:81px; border-bottom:1px solid #ccc;}
#title{font-size:20px; float:left; margin-left:20px; margin-top:10px;}
#delbutton{float:right; margin-right:20px; margin-top:30px;}

I want to be able to swipe right and the checkbox to appear, is this possible in anyway? I wanted it to be as simple as possible, not too much coding and clutter but cant find a slimline version.

Anyone got any ideas that could help me?

Solution

First of all, your code had an error, you were using id's for maincontent and other stuff. When an element is repeated you should be using classes instead (see the fiddle). Id's are limited to one per page ( for example, one #maincontent, one #title, etc), anyway, for your question, here's one way of doing it:

http://jsfiddle.net/jonigiuro/QDH6Z/2/

when the users presses the mouse button (or touch), the script checks the cursors position:

element.on('mousedown', function(e) {
    self.startPosition = e.clientX;
});

and it does the same when the user releases the mouse button

element.on('mouseup', function(e) {
    self.endPosition = e.clientX;
});

and then it calculates the delta between the two values to see if the user has swiped:

if( self.endPosition - self.startPosition > threshold ) {
     self.currentElement.find('input').addClass('visible');
}

Or you could use a jquery plugin like this one: https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

hope this helps

EDIT! that code above did not work because I was not properly using touch events. Here's the correct fiddle:

http://jsfiddle.net/jonigiuro/QDH6Z/33/

element.on('touchstart', function(event) {
    element.find('input').removeClass('visible'); //hide all the checkboxes when the swipe begins
    self.startPosition = event.originalEvent.changedTouches[0].pageX;
});