Inside Technique : Targeted Drag and Drop : Setting up the Drag

Now that we've looked at a quick-n-cheap drag and drop simulation, it's time to look at the real thing. The Top 5 demo on the first page uses images, but you can adapt this technique to drag HTML instead, by using DIV instead of IMG tags.

Let us first look at how a draggable element is defined -

<DIV class="dnd">
  <IMG SRC="mind.gif" WIDTH=115 HEIGHT=45 BORDER=0>
</DIV>

As in the previous technique, there is nothing unusual about the DIV element, except that it has been given a class name. Of course, you would set the WIDTH and HEIGHT attributes of the IMG to fit your images. It is important that all IMGs have the same WIDTH and HEIGHT. Repeat this declaration for each DIV you want to make draggable. Finally add an absolutely positioned DIV to your page like this -

<DIV ID="floater" style="visibility:hidden;position:absolute">
<IMG SRC="trans.gif" WIDTH=115 HEIGHT=45 BORDER=0>
</DIV>

This floating DIV is the only moving element in the page, the rest of the DIVs are not absolutely positioned, and therefore cannot be moved. Also notice that the IMG inside the DIV is given a SRC, even though it is initially invisible. This is because of a bug in IE4 that prevents dynamically setting the SRC of an IMG if the original SRC is not specified.

Coming to the code, the event capturing part is standard -

document.onmousedown=DragStart;
document.onmouseup=DragEnd;
document.onmousemove=DoDrag;

The fun starts in the mousedown handler. The code goes like this -

function DragStart(){
el=event.srcElement;
if(el.parentElement.className=='dnd'){
	DragEl=el;
	InitLeft=event.clientX;
	InitTop=event.clientY;
	InitElTop=getRealPos(el,"Top");
	InitElLeft=getRealPos(el,"Left");
	floater.style.pixelTop=InitElTop;
    	floater.style.pixelLeft=InitElLeft;
	floater.children[0].src=el.src;
	el.src='trans.gif';
	floater.style.visibility='visible';
	}
}

After first checking if the element that the user clicked on is in fact draggable, the function stores the values of the event's clientX and clientY (the click co-ordinates in pixels). Then it calculates the co-ordinates of the clicked element relative to the start of the document by calling the generic getRealPos function. This function has been dicussed by Scott Isaacs in his Interactive Tooltips article here on SiteExperts. So far this is standard drag and drop code.

The function then positions the floating DIV exactly over the clicked element. It sets the SRC of the floating DIV's IMG to point to the SRC of the clicked element's IMG. Then it sets the clicked elements IMG to a transparent gif, and makes the floating DIV visible.

What this essentially translates into is that the user is now seeing the floating DIV, not the element that he had initially clicked. Also, it is now the floating DIV which will be dragged. The drag code is implemented by the onmouseover handler, and goes something like this -

function DoDrag(){
if(DragEl){
  floater.style.pixelLeft=event.clientX+InitElleft-InitLeft;
  floater.style.pixelTop=event.clientY+InitEltop-InitTop;
  return false;
  }
}

Once again, this is standard drag and drop code. The really interesting part comes in the onmouseup handler, which uses a Collision Detection algorithm to decide which element is the Drag Target. We will discuss this handler in the next section.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.