Home > 2010 Summer BTI220 > Drag and drop #1 – the essentials

Drag and drop #1 – the essentials

Programming drag and drop functionality is a pretty good way to learn HTML + CSS + JavaScript. In this post, we learn the essentials.


You can configure HTML elements that can be moved around your page. This functionality enables many different kinds of use cases, some of which you will use in Assignment 3.


Concepts that you need to learn

For drag and drop, there are a few concepts that you need to learn:

  1. Identifying and working with an element that can be dragged and dropped
  2. Browser (mouse) events, and a browser "event object"
  3. Drag and drop related mouse events – onmousedown, onmousemove, and onmouseup

We will be using DOM Level 0 browser events.


Identify and work with the draggable element

First, we need to identify the element that can be dragged and dropped. Typically, this is done with a CSS class selector.

Create a class selector for your draggable element. I called mine ".draggable".

The rule that makes it work is position: relative;. You can also change the cursor shape with a rule.


Study the browser (mouse) events

Next, we need to study browser (mouse) events, and a browser "event object".

We already know that the browser will detect user (and other) events. We will take advantage of this fact. In past examples, we have assigned our own functions as event handlers.

We are interested in these events:

  • onmousedown – event for the mouse button click
  • onmousemove – event for the mouse move action
  • onmouseup – event for the release of the mouse button click

For a drag and drop operation, we are interested in the onmousemove event only if the onmousedown event is being handled. In other words, when a click-and-drag is happening.

You should learn that an event handler can receive an "event object". The event object includes state (information), which we can use. For example, it can tell us the current position coordinates of the mouse. (We will use this information to move a draggable element.)

For our operation, we would be interested in the original coordinates of a draggable element, and the current coordinates of the mouse.


Write functions for the events

Finally, we need to write JavaScript functions to handle the drag and drop related mouse events.

We need separate functions that will handle the above-named onmousedown, onmousemove, and onmouseup events.

We also need to set some initial state, and tell the browser to use our functions for these events.


Code example

Today’s example will be covered in class. You can download its zip from here.

In it, you will learn the foundations for drag and drop. You will build on these foundations when you do more complex pages.


Categories: 2010 Summer BTI220
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: