Swipe UI with PostBack Actions

With the rising use of touch-enabled devices, it might be nice to add some swipe functionality to your application. For this you can add jQuery or some other Javascript libraries especially designed for this. But you can also use plain vanilla Javascript. This gives you the benefit of completely controlling the actions that should be taken after the swipe is done. Here's a Javascript that will detect left, right, up or down swipes on an element. It also checks for some tolerance as well. 

Here's an example of this script's usage.

Do note: this image is not swipeable... ;-)

Make the element "swipeable"

To make the element that will be your "swipe-zone" swipeable, all you need to do is give it an ID. Make sure it is big enough for the swipe action. You can use whatever you want; DIVs Tables, Images and such. Bad choices are elements that have a click action or any other event that is triggered by just touching it.

The Javascript

function swipedetect(el, callback) {

var touchsurface = el,
swipedir,
startX,
startY,
distX,
distY,
threshold = 150,
restraint = 100,
allowedTime = 300,
elapsedTime,
startTime,
handleswipe = callback || function (swipedir) { }

touchsurface.addEventListener('touchstart', function (e) {
var touchobj = e.changedTouches[0]
swipedir = 'none'
dist = 0
startX = touchobj.pageX
startY = touchobj.pageY
startTime = new Date().getTime()
e.preventDefault()
}, false)

touchsurface.addEventListener('touchmove', function (e) {
e.preventDefault()
}, false)

touchsurface.addEventListener('touchend', function (e) {
var touchobj = e.changedTouches[0]
distX = touchobj.pageX - startX
distY = touchobj.pageY - startY
elapsedTime = new Date().getTime() - startTime
if (elapsedTime <= allowedTime) {
if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint) {
swipedir = (distX < 0) ? 'left' : 'right'
}
else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint) {
swipedir = (distY < 0) ? 'up' : 'down'
}
}
handleswipe(swipedir)
e.preventDefault()
}, false)
}

var el = document.getElementById("swipezone");
swipedetect(el, function (swipedir) {
// swipedir contains either "none", "left", "right", "up", or "down"

if (swipedir == "left") {
var clickButton = document.getElementById('btnReject');
clickButton.click();
}

if (swipedir == "right") {
var clickButton = document.getElementById('btnAccept');
clickButton.click();
}

if (swipedir == "up") {
alert("Here you could edit the presented item " + document.getElementById("hfItemID").value);
}

if (swipedir == "down") {
alert("Here you could delete the presented item " + document.getElementById("hfItemID").value);
}
});

Editable parameters

There are 3 parameters that you can change if needed, but in most cases it isn't necessary to do so:

  • threshold
    This is the minimum length in pixels for the swipe action. Accidental touches will not be recognized as a real swipe action.
  • restraint
    A perfect horizontal or vertical swipe is nearly impossible. But if you swipe from the bottom left corner to the upper right corner, it is impossible to tell if this should count as a horizontal or vertical swipe. The restraint in pixels allows for imperfect horizontal or vertical swipes. Outside of this margin it will count neither as a horizontal or vertical swipe.
  • allowedTime
    A swipe should be one swift movement. If it takes too long, it might not be a swipe action but perhaps someone is just wiping the screen clean. So if the allowedTime is exceeded, it doesn't count as a swipe.

Once the user swipes over the designated element, it will result in the swipeDir being set. Using the swipeDir you can then perform any action needed. In this case I used it to simulate a button click, with the button itself triggering a PostBack action so I could handle the swipe action on the server-side.

Do note that you need to change the "swipezone" into the ID you gave to your swipeable element.

Let's wrap it up

That's it for this post. Check out the demo for this on our website. Feel free to leave a comment or send a question to andre@silveressence.net. Let me know if you got inspired and may the source be with you!