Drag_and_drop

So the concept for this page is a way to design a layer that can be moved around by a mouse. We've seen a way to move a layer with a mouse before. We put an "onMousemove" attribute on the itself that set the div's left and top attributes to be slightly less than the mouse's x and y coordinates. This was pretty neat, but it meant that just accidentaly passing the mouse over the layer would make it move - whether you want it to or not.

The ideal behavior would be that you would have to press the mouse on the layer, then (with the mouse held down) wherever you move the layer, the mouse's coordinates would pass to the layer's (left, top), offset by a little bit. Then, when you let go of the mouse, the layer would stay where it is.

The trick will be to use a variable - one that indicates whether the mouse is on the layer with the button down. (We can change the status of this variable with the mouseDown and mouseUp attributes.) Then in "onMouseMove," we can check the variable to see whether we should change the div's position or not.

Let's consider a layer like the following: code format="html4strict"  code And a script area that looks like this:

code format="html4strict"  var gliderButtonDown = false;

function makeGliderFollow(evt) {   if (gliderButtonDown) {       theLayer= document.getElementById("glider"); theLayer.style.left = evt.clientX - 25 + "px"; theLayer.style.top = evt.clientY - 25 + "px"; return false; }  } code So far, this won't do anything, because the gliderButtonDown variable is always false. We will add two functions to make this work: startGliderFollow and endGliderFollow that will be called when the user presses the mouse and releases the mouse.

code format="html4strict" function startGliderFollow { gliderButtonDown = true; }

function endGliderFollow { gliderButtonDown = false; } code Now we need to add the mouse event handlers to the tag. Replace the first bit of code with the following: code format="html4strict"   code The extra "return false" commands in the mouseDown and mouseUp attributes prevents the mouse press from being sent to the image - which keeps the image from being dragged in the traditional sense - typically, you can drag an image to the desktop, for instance.

So now the image will drag. But there are improvements we can make. For instance, the 25 pixel offsets in the makeGliderFollow function are completely arbitrary. I could improve this by making them be exactly half the width and height of the image, which would make the center of the bullseye track the mouse. However, this would cause a disconcerting "snap" when you click on the target - the image would jump so that the center is on the mouse. Instead, let's record how far away the mouse is from the upper left corner of the layer when we first click on it. We'll add in two variables and change startGliderFollow to establish what the offset should be. code format="html4strict" var xOffset; var yOffset;

function startGliderFollow(evt) {  theLayer = document.getElementById("glider"); gliderButtonDown = true; xOffset = evt.clientX-parseInt(theLayer.style.left); yOffset = evt.clientY-parseInt(theLayer.style.top); } code And... So here is the finalized : code format="html4strict"  var gliderButtonDown = false; var xOffset; var yOffset; function initialize {	theLayer = document.getElementById("glider"); theLayer.style.left="0px"; theLayer.style.top="0px"; }
 * we will need to have the onMouseDown attribute of the pass "event" along.
 * we need to create an initialize method and call it from
 * we'll add in the multi-platform event modifier line that we learned earlier this semester.

function makeGliderFollow(evt) {	evt=(evt)?evt:((window.event)?window.event: null); if (gliderButtonDown) {		theLayer= document.getElementById("glider"); theLayer.style.left = evt.clientX - xOffset + "px"; theLayer.style.top = evt.clientY - yOffset + "px"; return false; }  }

function startGliderFollow(evt) {	evt=(evt)?evt:((window.event)?window.event: null); theLayer = document.getElementById("glider"); gliderButtonDown = true; xOffset = evt.clientX-parseInt(theLayer.style.left); yOffset = evt.clientY-parseInt(theLayer.style.top); }

function endGliderFollow {	gliderButtonDown = false; } code and the finalized code format="html4strict"   code