Html programming crash course (2015)

Chapter 3: Dragging And Dropping

In this chapter, you will learn about:

• Drag and drop

• Starting a drag and drop example

• Styling target and draggable elements

Drag and drop operations are supported in HTML5. You can easily move text and elements around the window of the browser using a mouse, or any type of pointing device that you may have.

This functionality is extremely useful and can be used for a variety of purposes. For instance, it can allow users to drag and drop items into a shopping cart, or allow them to customize things on their homepage.

Drag And Drop

The drag and drop functionality requires the following element attributes:

▪ draggable

▪ ondragenter

▪ ondragover

▪ ondrop

▪ ondragstart

▪ ondragend

The following browsers support dragging and dropping element of HTML5: Firefox, Safari, Chrome, Opera.

Just like other elements of HTML5, this one is also dependent on JavaScript. You simply connect an ‘on’ attribute (such as ondragstart) to a function of JavaScript which would then take place as soon as the user starts to drag an element:

ondragstart = “return start(event)”;

Drag And Drop API

You can learn all about the drag and drop specifications at http://dev.w3.org/html5/spec/dnd.html. However, the purpose of this book is to get you acquainted with the most important aspects of HTML5.

From the point of view of HTML, the following attributes support drag-and-drop:

▪ draggable

▪ ondragenter

▪ ondragover

▪ ondrop

▪ ondragstart

▪ ondragend

The Draggable Attribute

You can easily create a draggable element by setting its attribute to true in the following manner:

</div>

This code informs the web browser that a particular element can be dragged. However, you also need to connect them to a JavaScript function to make it fully work.

The OnDragEnter Attribute

Drag enter events take place whenever a user drags a draggable element. This can be connected to a JavaScript handler function in the following way:

<div id=”target1”

ondragenter=”return enter(event)”

Note that the event occurs in drop targets and not in the draggable elements.

The OnDragOver Attribute

This event occurs within a drop target whenever a user drags a draggable element over it. This event is connected to a JavaScript handler in the following manner:

<div id=”target1”

ondragenter=”return enter(event)”

ondragover=”return over(event)”

The event occurs in drop targets.

The OnDrop Attribute

Drop events occur in the drop target when users drop an element onto the specified target. This event is connected to a JavaScript function handlers in the following way:

<div id=”target1”

ondragenter=”return enter(event)”

ondragover=”return over(event)”

ondrop=”return drop(event)”>

This event tends to occur in drop targets. Do not forget that it is on drop, and not ondragdrop.

The OnDragStart Attribute

This event takes place within draggable elements whenever a user starts to drag them. This event can be connected to JavaScript function handlers in the following way:

<div id=”draggable1” draggable=”true”

ondragstart=”return start(event)”

The ondragstart event occurs only in draggable elements.

The OnDragEnd Attribute

Whenever users stop dragging draggable elements, this event occurs. You can connect this event to the JavaScript function handlers like this:

<div id=”draggable1” draggable=”true”

ondragstart=”return start(event)”

ondragend=”return end(event)”>1

Starting A Drag And Drop Example

The following step by step guidelines will help you to put the drag and drop element to work.

1. Create a file called draganddrop.html using any text editor.

2. Input the following code to construct three targets on which the draggable elements can be dropped. Note here that the <div> elements are being used for targets and that the drag and drop events will be connected to JavaScript functions.

<!DOCTYPE HTML>

<html>

<head>

<title>

Drag and Drop Example

</title>

</head>

<body>

<h1>Drag and Drop Example</h1>

<div id=”target1”

ondragenter=”return enter(event)”

ondragover=”return over(event)”

ondrop=”return drop(event)”>

</div>

<div id=”target2”

ondragenter=”return enter(event)”

ondragover=”return over(event)”

ondrop=”return drop(event)”>

</div>

<div id=”target3”

ondragenter=”return enter(event)”

ondragover=”return over(event)”

ondrop=”return drop(event)”>

</div>

</body>

</html>

3. Now add the code below to create three draggable <div> elements.

<!DOCTYPE HTML>

<html>

<head>

<title>

Drag and Drop Example

</title>

</head>

<body>

<h1>Drag and Drop Example</h1>

<div id=”target1”

ondragenter=”return enter(event)”

ondragover=”return over(event)”

ondrop=”return drop(event)”>

<div id=”draggable1” draggable=”true”

ondragstart=”return start(event)”

ondragend=”return end(event)”>1

</div>

<div id=”draggable2” draggable=”true”

ondragstart=”return start(event)”

ondragend=”return end(event)”>2

</div>

<div id=”draggable3” draggable=”true”

ondragstart=”return start(event)”

ondragend=”return end(event)”>3

</div>

<div id=”target2”

ondragenter=”return enter(event)”

ondragover=”return over(event)”

ondrop=”return drop(event)”>

</div>

<div id=”target3”

ondragenter=”return enter(event)”

ondragover=”return over(event)”

ondrop=”return drop(event)”>

</div>

</body>

</html>

4. Save the file, ensuring that you save it in text format.

Now that we have started our example containing three targets and the same number of draggable elements – all of these are currently invisible. We will now style them next.

Styling Target And Draggable Elements

We will now make visible the <div> elements for draggables and targets. The targets would be styled in cyan, and the draggables in orange.

Follow the steps below to do that:

1. Open the file draganddrop.html using your favorite text editor.

2. Add the code given below to style the target and draggable <div> elements.

<!DOCTYPE HTML>

<html>

<head>

<title>

Drag and Drop Example

</title>

#target1, #target2, #target3

{

float:left; width:250px; height:250px;

padding:10px; margin:10px;

}

#draggable1, #draggable2, #draggable3

{

width:75px; height:70px; padding:5px;

margin:5px;

}

#target1 {background-color: cyan;}

#target2 {background-color: cyan;}

#target3 {background-color: cyan;}

#draggable1 {background-color: orange;}

#draggable2 {background-color: orange;}

#draggable3 {background-color: orange;}

</style>

</head>

<body>

<h1>Drag and Drop Example</h1>

<div id=”target1”

ondragenter=”return enter(event)”

ondragover=”return over(event)”

ondrop=”return drop(event)”>

<div id=”draggable1” draggable=”true”

ondragstart=”return start(event)”

ondragend=”return end(event)”>1

</div>

<div id=”draggable2” draggable=”true”

ondragstart=”return start(event)”

ondragend=”return end(event)”>2

</div>

<div id=”draggable3” draggable=”true”

ondragstart=”return start(event)”

ondragend=”return end(event)”>3

</div>

<div id=”target2”

ondragenter=”return enter(event)”

ondragover=”return over(event)”

ondrop=”return drop(event)”>

</div>

<div id=”target3”

ondragenter=”return enter(event)”

ondragover=”return over(event)”

ondrop=”return drop(event)”>

</div>

</body>

</html>

3. Save the file. Now you will be able to see draggables as well as targets.

Summary

The drag and drop functionality requires the following element attributes:

draggable

ondragenter

ondragover

ondrop

ondragstart

ondragend

The following browsers support dragging and dropping element of HTML5: Firefox, Safari, Chrome, Opera.

The target and draggable elements can be styled easily.