Build a Multi-Touch Interface with the Fidget jQuery Plugin

[Simon27]

This article explains how my Fidget jQuery plugin can be used to easily use the Touch events within Mobile WebKit to detect various gestures. You will build a very simple interface that allows a lecturer to organise students into 2 different groups, simply by dragging.

Because of the way devices like the iPad handle traditional mouse events, it is better to use the available Touch events instead, and Fidget simplifies a process that can become quite complex.

Start by downloading the attached files an explore their contents. This demo works best on an iPad (for the size) but should work on other Mobile WebKit browsers. Each code block can be tested, providing results before the end of this tutorial is reached.




The project folder contains the HTML page, a CSS file to style it, jQuery, the Fidget plugin and students.js, for your own code.

View the HTML from an iPad and you will see 3 boxes, one green filled with student names, and 2 others for student groups A and B. In this tutorial you will use Fidget to build an interface that allows the lecturer to group their students into the 2 groups by dragging.

Open the blank students.js file and add the following code:

$(document).ready(function() {
    $('.student').fidget({
        dragThis: true
    });
});

Once the page has finished loading, this code finds every HTML element with a class of student
and automatically moves it around the page as the user drags it.

You will be able to move the students around but they will just stay where you leave them. We need to know when they have been dropped over a group.

Now update students.js with the code in bold:

$(document).ready(function() {
    $('.student').fidget({
        dragThis: true,
        swipe: dragStudent
    });
});
 
 
function dragStudent(event, fidget) {
 
$(this).css('pointerEvents', 'none');
 
var hoveredElement =
    document.elementFromPoint(fidget.currentFingers[0].pageX,
    fidget.currentFingers[0].pageY);
 
if (fidget.swipe.status == 'move') {
    if ((hoveredElement.id == 'groupA') || (hoveredElement.id == 'groupB')) {
        $(hoveredElement).addClass('hover');
    }     
}
 
$(this).css('pointerEvents', 'auto');
 
}

Save this file and refresh the page on the iPad. Now when a student is dragged over one of the groups a drop shadow highlights the group by adding the class hover to the group.

Amend that function with the code in bold to remove the drop shadow when the finger is no longer over a group:

function dragStudent(event, fidget) {
 
$(this).css('pointerEvents', 'none');
 
var hoveredElement =
    document.elementFromPoint(fidget.currentFingers[0].pageX,
    fidget.currentFingers[0].pageY);
 
if (fidget.swipe.status == 'move') {
    if ((hoveredElement.id == 'groupA') || (hoveredElement.id == 'groupB')) {
        $(hoveredElement).addClass('hover');
    } else {
            $('#groupA, #groupB').removeClass('hover');
    }
}
 
$(this).css('pointerEvents', 'auto');
 
}

Now then the finger is not over either of the 2 groups the hover class is removed.

This is the “dragStudent” function you gave to Fidget earlier and it takes 2 arguments called event and fidget. fidget is an object with properties that give us information on the current gesture of the user.

The hoveredElement variable is used to find which of the boxes the finger is currently dragging over, based on the x and y coordinates of the first finger on the screen. This finger is fidget.currentFingers[0] and is an array of all the fingers on the screen at any one time. The “zeroth” finger is taken from the array as that will be the first that touched the screen. The pageX and pageY properties give the coordinates of this finger.

The if statement in the code uses the fidget.swipe.status property to check if the fingers on the screen have moved since they started.

The second if statement checks to see if the finger is over either <div> with the ids #groupA and #groupB. If the finger is, then it adds the class of hover to that group. You’ll notice that when you drag one of the students over a group a drop-shadow appears, this is from the hover class.

The else statement is used to remove the shadow – by removing the hover class – when the finger is not over either of the groups.

Now we need to add the following code to detect when the user has let go of a student and where it should be placed. Amend the dragStudent function with the code in bold:

function dragStudent(event, fidget) {
 
$(this).css('pointerEvents', 'none');
 
var hoveredElement =
    document.elementFromPoint(fidget.currentFingers[0].pageX,
    fidget.currentFingers[0].pageY);
 
if (fidget.swipe.status == 'move') {
    if ((hoveredElement.id == 'groupA') || (hoveredElement.id == 'groupB')) {
        $(hoveredElement).addClass('hover');
    } else {
        $('#groupA, #groupB').removeClass('hover');
    }    
}
 
if (fidget.swipe.status == 'end') {
    if ((hoveredElement.id == 'groupA') || (hoveredElement.id == 'groupB')) {
        $(hoveredElement).append(this);
        $(hoveredElement).removeClass('hover');
    } else {
        $('#students').append(this);
        $(this).fidget({
            dragThis: true,
            swipe: dragStudent
        });
    }
    $(this).css('top', 0);
    $(this).css('left', 0);
}
 
$(this).css('pointerEvents', 'auto');
 
}
 

Refresh the page on the iPad and you should now be able to drag and drop students into either of the groups, between groups, and back to the main students list.

This code uses another if statement using the same fidget.swipe.status property, but this time checks for when it is “end”, i.e. when the finger has left the screen to drop the student name.

Again, another if statement checks to see if the student was dropped over group A or B, and moves the student HTML element into the group by using the jQuery append method. The class of hover is again removed from here.

The else statement will run when the student has not been dropped on either group A or B. In that case, the student is returned to the main student list and not left in any position on the page.

You will notice that only 2 students can be added to a group without the names disappearing below. To solve this, we can use Fidget to detect a 2 finger pinch gesture and use that to change the size of the groups. Modify the first part of students.js with the code in bold:

$(document).ready(function() {
    $('.student').fidget({
        dragThis: true,
        swipe: dragStudent
    });
 
    $('#groupA, #groupB').fidget({
        pinch: function resize(event, fidget) {
            $(this).css('height', fidget.pinch.height + 'px');
        }
    });
});

This takes the HTML elements of #groupA and #groupB and tells Fidget to call the resize function when a pinch event occurs on those matched elements.

On refreshing the page, you should now be able to place 2 fingers on one of the groups and pinch outwards to increase the size, or inwards to decrease the size.

We are only interested in the Y direction of movement, as we want to change the height, not the width of the group.

The this keyword is the HTML element that the pinch event is targeting.

I am looking for feedback
I'm currently developing Fidget for my university honours project and any feedback that can be provided (positive and negative) would be hugely appreciated.

Visit my site for more information...