Guide to writing smooth drag & drop Javascript (from scratch): Part I
by
What are we building? Why is this relevant? Is it practical?
Do you really want to limit your JavaScript repertoire to what you can find in the jQuery plugin library?
I'm going to explore (with code examples & practical knowledge) the world of JavaScript drag & drop, and expand what you're capable of.
Let's build something completely awesome. From scratch.
Getting started
Did I say from scratch? Let's skip universe creation, and use jQuery to help us get a handle on the things we want to grab.
I recommend that you develop locally in a single file. Keep it simple, because it's easier to see the rad. (Also, I'll be using Google Chrome to create these examples, we can talk about X-browser compat. later)
There are some tools we're going to use to make our HTML come to life:
- Mouse events: mousedown, mouseup, mousemove (what are these?)
- Document event object: (e) (what is this?)
- DOM element position attributes (what are these?)
Drag & drop means a few different things to UI developers. Here are some examples of how drag & drop is used on the web today:
- Drag an icon/image around the screen and drop it onto something (Panic Software)
- Drag content around to navigate through it (Spezify [flash])
- Drag a handle around to navigate through content (scroll bars, everywhere)
I'm going to focus on a 'click (mouse down) to start dragging', 'let go (mouse up) to stop dragging' pattern.
Basic Dragging + Dropping
First thing is to create an HTML element that we can drag around (drop it in your <body>). Here's mine:
...and now create a reference to use at document load:
By storing the lookup in a variable, we can save the browser from having to look it up every time we use it.
$(function() { }) is a jQuery shortcut for $(document).ready(function() { })
We want the #target to react when the mouse interacts with it. We can do so by assigning actions to the different mouse events. Here's our template for creating this interaction:
Have you ever seen functions used this way? They're called anonymous functions; they can be useful, but are lame in excess. Learn more.
Also, where did that (e) come from? No worries. This is an isolated incident. The e here represents an event object. It's created when an event is triggered, and we can get ahold of it through our anonymous function. It's optional, and we're opting in.
Staying with me so far? I'm going a little slow, but don't worry. Things are going to ramp up quickly.
We are going to use the mouse events to determine what's going on in the browser. In this case, we're going to assume two things:
- If the mouse is clicked down on our #target, then the user is going to start dragging the #target
- If the mouse is un-clicked (mouseup) anywhere on our document, then the user is probably done dragging #target
Here's how it's done:
Now we're ready to make the dynamite go boom. All of our decision-making is going to take place in the 'mousemove' event.
The assumption is that if a user has clicked on #target, then moved their mouse, that a drag is in order. Let's do that.
It should act like this (drag the box around):
Summary
Success? I hope so. This was pretty basic. Here's what we covered:
- A little backstory on mouse events, the DOM and location attributes
- A basic interactive model for Drag & Drop (from scratch)