Making an Object Draggable

Another staple of GUIs is drag-and-drop: the ability to drag windows, files, and whatnot across the screen and drop them into a new element or location.

As an example of this technique, we'll create a poetry kit for a Web page (Figure 17.8). You may have one of these games on your refrigerator right now: Each word is on a magnetic chip, which can be moved around and combined with other chips to create phrases.

Figure 17.8. Can you figure out the word jumble?

To set up object dragging:

var object = null;

Initialize the following global variables (Code 17.6):

Code 17.6. The three functions `pickIt()`, `dragIt()`, and `dropIt()` let the visitor move an object around on the screen.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Drag and Drop</title> <script type="text/javascript"> var object = null; var cX = 0; var cY = 0; function initPage () {      document.onmousedown = pickIt;      document.onmousemove = dragIt;      document.onmouseup = dropIt; } function pickIt(evt) {      var evt = (evt) ? evt : ((window.event) ? window.event : null);      var objectID = (evt.target) ? evt.target.id : ((evt.srcElement) ? evt.srcElement.id :  null);      if (objectID.indexOf('chip')!=-1) object = document.getElementById (objectID);      if (object) { object.style.zIndex = 100;      cX = evt.clientX - object.offsetLeft;      cY = evt.clientY - object.offsetTop;      return;    }    else {        object = null;        return; }} function dragIt(evt) {      evt = (evt) ? evt : ((window.event) ? window.event : null);      if (object) {         object.style.left = evt.clientX - cX + 'px';         object.style.top = evt.clientY - cY + 'px';         return false; }} function dropIt() { if (object) {         object.style.zIndex = 0;         object = null;         return false; } } </script> <style type="text/css"> .chip {      position: absolute;      padding: 8px;      border: 1px solid #333;      border-right: 3px solid #333;      border-bottom: 3px solid #333;      background-color: #fff;      cursor: move;      z-index: 0; } #chip1 { top: 123px; left: 225px; } #chip2 { top: 5px; left: 25px; } #chip3 { top: 200px; left: 45px; } #chip4 { top: 55px; left: 55px; } #chip5 { top: 150px; left: 60px; } #chip6 { top: 75px; left: 125px; } </style> </head> <body onload="initPage();"> <div  >One</div> <div  >Ring</div> <div  >to</div> <div  >Rule</div> <div  >Them</div> <div  >All</div> </body></html>

object records the ID of the object being moved.
cX records the current left position of the object.
cY records the current top position of the object.

function initPage() {...}

Add the initPage() function to the body element.

This function sets the event handlers to be automatically triggered for mousedown, mousemove, and mouseup events that occur anywhere on the page (see "Binding Events to Objects" in Chapter 12).

function pickIt(evt) {...}

Add pickIt() to the JavaScript.

This functionwhich is very much like the findObject() function (see "Detecting Which Object Was Clicked" in Chapter 14)finds the ID of the object that the visitor clicked.

However, we don't want to move all of the objects on the screen; we only want to move one of them at a time. So, if the visitor clicked one of the objects that contain the word "chip" in its ID, the function sets the z-index of that object to 100, which should place it well above all other objects on the page. Otherwise, if a chip is not clicked, the function does nothing.

function dragIt(evt) {...}

Add the dragIt() function to your JavaScript.

This function will be triggered every time the visitor moves the mouse. The function doesn't do anything unless the visitor first clicks one of the chips, in which case the function moves the chip as the visitor moves the mouse.

function dropIt() {...}

Add the dropIt() function to the JavaScript.

This function is triggered when the visitor releases the mouse button. It sets the object's z-index at 0 and then resets the variable object to null. This releases the object from being dragged, dropping it in its new position.

.chip {...}

Set up a class style rule to define the appearance of the movable objects on the screen. Make sure to define the chips as being absolutely positioned with a z-index of 0.

#chip1 {...}

Set up a different ID selector CSS rule for each object on the screen. Give each object an initial top and left position.

onload="initPage();"

In the <body> tag, add an onload event handler to trigger initPage().

<div  >...</div>

Set up layers for as many objects as needed, each with its own unique ID that includes the word chip.

Tips

Dragging and dropping has a variety of applications, including allowing you to create movable areas of content and navigation.
Drag-and-drop code can be very sensitive, so be careful when making changes, and test often to make sure you haven't inadvertently upset the script.

Figure 17.8. Can you figure out the word jumble?

Code 17.6. The three functions pickIt(), dragIt(), and dropIt() let the visitor move an object around on the screen.

Code 17.6. The three functions `pickIt()`, `dragIt()`, and `dropIt()` let the visitor move an object around on the screen.