HTML5 Drag and Drop Tutorial

Add Drag & Drop for Desktop Games & Web Projects

For Mobile Devices See the Learn to Drag a Sprite Example with Tutorials

Drag and Drop Example Introduction HTML Tags Drag Elements Drop Targets Tips Summary Source Code Page

Introduction

This tutorial explains how to add drag and drop features for online games and other Web projects. Drag and drop functionality provides intuitive interaction. The ability to touch and move elements offers quick and effective user feedback. Enjoy this free HTML5 training tutorial. Learn to prepare HTML5 drag and drop features with JavaScript, HTML5, and CSS.

This article demonstrates how to save drag elements and copy those elements to drop targets. Topics include implementing ondragstart(), ondrag(), and ondrop() event handlers. The HTML5 draggable attribute is also discussed. The entire Drag and Drop Source Code is included to drag elements and drop them onto drop targets.

HTML Tags

Use any DOM element for drag and drop. Set the draggable attribute to true for any element you want to drag, except anchor and image tags. Anchor and image tags respond to drag events by default.

With HTML markup, create one or more elements that you want to drag. We'll call them drag elements. Assign ondragstart() event handlers to each drag element.

With HTML markup, create one or more elements to receive drag elements. We'll call them drop targets. In HTML create one or more drop targets. Assign ondragover() and ondrop() event handlers to each drop target.

Drag Elements

The following drag elements are images which include ondragstart() event handlers named drag(). Each drag element includes an image source and some text within the image's alt attribute. Notice each image includes an id attribute. The id attribute is used to obtain and drop an image onto a drop target.

<img	
id="adjacent" 
class="square" 
src="adjacent.gif"
ondragstart="drag(event)"
alt="text: Adjacent"/>

<img	
id="opposite" 
class="square"
src="opposite.gif"
ondragstart="drag(event)"
alt="text: Opposite"/>		
		

Drop Targets

The following drop target includes ondrop and ondragover event handlers named drop(ev) and dragOver(ev) respectively. The drop element includes an id attribute with the value 1. The HTML5 Drag and Drop Example includes sixteen drop targets. The id attribute values range from 1 to 16. However each of sixteen drop targets share functions drop(ev) and dragOver(ev). The drop targets can't be moved. Code assigns the draggable attribute a value of false.

<div 
class="square" 
ondrop="drop(event)" 
ondragover="dragOver(event)" 
id="1"  
draggable="false"
> 

</div>
		

JavaScript for Drag and Drop

The HTML5 Drag and Drop Example includes two drag elements. The drag elements are square images with text which say Adjacent or Opposite. Each square image includes an ondragstart event handler named drag(ev).

The example displays a background image with an invisible grid of drop targets. Drop targets include ondrop and ondragover event handlers. The ondrop event handler is named drop(ev). Event handler drop(ev) appends drag elements to an associated drop target. The ondragover event handler is named dragOver(ev).

First when the user drags over a drop target, event handler dragOver(ev) just calls the event object's preventDefault() method. Method preventDefault() stops the Web browser's default response.

function dragOver(ev) { 
 ev.preventDefault(); 
}

Second when the user drags an element, event handler drag(ev) assigns the drag element's id to to the Text data key of the event object. The following listing includes the entire drag(ev) event handler.

function drag(ev) {

ev.dataTransfer.setData(

 "Text",ev.target.id

 ); 
}

Third when the user releases the mouse over a drop target, function drop(ev) obtains the id of the last dragged element.

var data=ev.dataTransfer.getData(
 "Text"
);

Function drop(ev) accesses the id of the drag element. Function drop(ev) appends the drag element to the drop target by id. In the following short listing variable ev is the current event object. Property target is any of the sixteen drop targets. Variable data is the id of one of the two drag elements.

ev.target.appendChild(
 document.getElementById(
  data
)

For details see the entire JavaScript Drag and Drop Source Code.

Tips, Tricks, and Issues

Testing demonstrated the HTML5 Drag and Drop Example works fine on Windows computers with various browsers. However the grid boxes switch location when you drag images at times.

Also in this simple example, if you drag one image on top of the other, the second image disappears. The second image doesn't reappear after subsequent drag events either. To fix the issue, just add JavaScript to maintain a reference and restore display of the second image when needed.

Mobile Drag and Drop

Unfortunately simple drag and drop doesn't work on mobile devices. The swipe gesture scrolls or changes Web pages on mobile phones and tablets. For mobile drag and drop development see the Drag a Sprite example, Drag and Drop Mobile Example and HTML5 Tap and Drop Example.

User Feedback

Ideally include visual and audio user feedback. For example when the user taps the Adjacent image, play a sound and display a highlight or outline the selected image. Those details were left out to keep the example simple. However the Highlight Example demonstrates a technique which highlights selected elements. The HTML5 Simple Audio Example explains how to activate sound when an HTML element's tapped.

Summary

This tutorial explained how to add drag and drop features for online games and other Web projects. Drag and drop functionality provides intuitive interaction. The ability to touch and move elements offers quick and effective user feedback. Enjoy this free HTML5 training tutorial. Learn to prepare HTML5 drag and drop features with JavaScript, HTML5, and CSS.

This article demonstrated how to save drag elements and copy those elements to drop targets. Topics included implementing ondragstart(), ondrag(), and ondrop() event handlers. The HTML5 draggable attribute was also discussed. The entire Drag and Drop Source Code is included to drag elements and drop them onto drop targets.

See the Drag a Sprite example for details regarding mobile drag functionality. See More HTML5 Examples.

More HTML5 Examples

Sprite Sheet Animation
Copyright © 2015 Seven Thunder Software. All Rights Reserved.