HTML5 Tap and Drop Tutorial

Add Tap & Drop to Desktop & Mobile Games with HTML5 Web Programming

Tap and Drop Example Introduction Prepare CSS Prepare HTML Markup Prepare JavaScript Tips Summary HTML Markup JavaScript CSS Entire Source Code

Introduction

This tutorial explains one of the simplest techniques to move elements around a Web page. Tap and drop works well with mobile devices. This lesson covers onclick event handlers with HTML5. This tutorial explains JavaScript which moves an HTML element from source to drop destinations. This lesson includes some helpful tips based on testing.

Mobile

Tap and drop works easily with mobile devices. Otherwise touch events are required to implement mobile drag and drop.

For detailed tutorials regarding mobile drag interaction see the Learn to Drag a Sprite example with tutorials. The Learn to Drag a Sprite example tested well with iPhone, Android, and Windows PCs with various browsers.

The technique presented in this tutorial is both simple to implement and works across a range of devices and browsers.

Prepare CSS

Prepare the destination background element which displays dropped images. The following rule-set assigns the size and background graphic which displays where users drop images. The following rule-set declares a 300 pixel square element with the background image.

.board {
width:300px; 
height:300px; 
background-size:100% 100%;
background-repeat:no-repeat; 
background-position:center; 
background-image:url('background.gif');
text-align:center;   
}

Declare a rule-set for individual squares which display over the background element.

.square{ 
color:white; 
width:75px; 
height:75px; 
float:left;
}   
	

Background Image

The trigonometry background image displays.

Trigonometry Background

Prepare HTML Markup

When the Web page loads call JavaScript function loadExample(). See the JavaScript section for details regarding loadExample().

<body onload="loadExample()">
		

With HTML create a couple of images to drag. Create a background image. Declare a background element which displays the background image. Declare an invisible grid of drop elements over the background element.

The images to move and the drop targets both include JavaScript onclick event listeners.

Two images move. The example assigns function tapMove() to each image. The following listing demonstrates HTML tags, attributes, and values for the two moveable images.

<img 
id="adjacent" 
class="square" 
src="adjacent.gif" 
onclick="tapMove(event)" 
alt="text: adjacent"
/>

<img 
id="opposite" 
class="square" 
src="opposite.gif" 
onclick="tapMove(event)" 
alt="text: adjacent"
/>		
		

In HTML create one or more elements that you want as drop targets. In other words images can attach to a drop target. Assign onclick event handlers to those elements. The HTML5 Tap and Drop Example uses a grid of div elements. Each div element receives an onclick event handler. Assign JavaScript function tapDrop() to each drop target destination.

The following listing demonstrates markup for the first div drop target.

<div 

class="square" 

onclick="tapDrop(event)" 

id="1">
1
</div>		
		

Prepare JavaScript

When the Web page loads obtain a reference to an HTML element which displays information to the user. The following listing includes global variables sSource and eDebug. When the Web page loads function loadExample() saves a reference to an HTML element with id equals eDebug.

var sSource = null;
var eDebug = null;
 
function loadExample(){
 eDebug = document.getElementById(
  'eDebug'
 );
} 
	

When the user taps a source element, onclick event handler tapMove() executes. Function tapMove() saves the id of the source element.

function tapMove(ev) {
 
sSource = ev.target.id.toString(); 

}
		

When the user taps a drop target, onclick event handler tapDrop() executes. Function tapDrop obtains a reference of the source target the user last clicked.

var elementToMove = document.getElementById(
 sSource
);
		

Function tapDrop() appends the source element to the destination drop target.

ev.target.appendChild(
 elementToMove
); 
		

Last function tapDrop() displays the source and destination ids to the user.

var sId = ev.target.id.toString();

// The the user which
// element moved to
// which location.
eDebug.innerHTML = "You moved  "+sSource+" to box: "+sId;  
		

The following listing includes the entire tapDrop() function. A try-catch block was included for testing. However try-catch blocks should be removed before release.

function tapDrop(ev) {
 
try {  
        
if (ev.target.id != sSource && sSource != null){
 
var elementToMove = document.getElementById(
 sSource
);

// Move the element.
ev.target.appendChild(
 elementToMove
); 

var sId = ev.target.id.toString();

// The the user which
// element moved to
// which location.
eDebug.innerHTML = "You moved  "+sSource+" to box: "+sId;  

} 

else {
 
sSource = ev.target.id.toString();

}

}

catch (err){
 
eDebug.innerHTML = "tapDrop() error:"+err.toString();

}

}
	

Tips, Tricks, and Issues

HTML Tap and drop easily works on mobile and desktop devices. However drag and drop doesn't work in mobile browsers without additional event handlers. Attempting to drag an img, div, or span element within a mobile Web browser scrolls the web page. The Learn to Drag a Sprite example and tutorials cover a series of event handlers for more complex mobile interaction.

Drag and Drop Error

Before dropping an image, include the following test in the tapDrop() function; if (ev.target.id != sSource && sSource != null). Attempting to drop the same element on itself, generates an error. Also test for null. Attempting to obtain an HTML reference from a null string obviously causes problems.

Visual and Audio Feedback

Ideally include visual and audio user feedback. For example when the user taps the Adjacent image, display a highlight or outline the image, and play a sound. Those details were left out to keep the example simple. However the HTML5 Highlight Example with tutorial demonstrates a simple technique to highlight an element when tapped. The Free HTML5 Audio Tutorials includes a set of HTML5 sound related examples and tutorials.

Summary

This tutorial explained one of the simplest techniques to move elements around a Web page. Tap and drop works well with mobile devices. This lesson covered onclick event handlers with HTML5. This tutorial explained JavaScript which moves an HTML element from source to drop destinations. This lesson included some helpful tips based on testing.

Tap and drop works easily with mobile devices. Otherwise touch events are required to implement mobile drag and drop. For detailed tutorials regarding mobile drag interaction see the Learn to Drag a Sprite example with tutorials. The Learn to Drag a Sprite example tested well with iPhone, Android, and Windows PCs with various browsers.

The technique presented in this tutorial is both simple to implement and works across a range of devices and browsers.

See more Free HTML5 Drag and Drop Tutorials. Have fun and love learning!

Drag & Drop Examples with Tutorials

Animated Effects
Copyright © 2015 Seven Thunder Software. All Rights Reserved.