My Little Scripts - drag-and-drop.html

Scripts.com - Get the best scripts NOW!
HotScripts.com - Over 10 web rings.
more links...
Index News Samples Downloads E-Mail me Forum Sign Up
DRAG-AND-DROP.HTML

Implementing drag and drop functionality is not as simple as one would think. Besides having to do a boundary check on all the draggable layers, you also have to make sure that the right layer is selected when overlapping occurs.

By combining a subset of my DHTML API with my mouse events script, I created this minimalist drag and drop HTML sample. I use a similar script in My Little Word Puzzles
<html>
<head><title>Drag and Drop</title>

<script type="text/javascript">
function GetLayer(layer)
         {
         var ReturnLayer = null;
         if(navigator.appName == 'Netscape')
           {
           if(parseInt(navigator.appVersion) == 5)
              ReturnLayer = document.getElementById(layer);
           else
              eval('ReturnLayer = document.' + layer + ';');
           }
         else
           {
           eval('ReturnLayer = document.all.' + layer + ';');
           }
         return ReturnLayer;
         }

function Layer(layer, x, y)
         {
         this.id = GetLayer(layer);
         Move(x, y, this.id);
         this.ClickedX = 0;
         this.ClickedY = 0;
         }

function SetZ(z, layer)
         {
         if(navigator.appName == 'Netscape')
           {
           if(parseInt(navigator.appVersion) == 5)
              layer.style.zIndex = z;
           if(parseInt(navigator.appVersion) == 4)
              layer.zIndex = z;
           }
         else
           {
           layer.style.zIndex = z;
           }
         }

function GetZ(layer)
         {
         if(navigator.appName == 'Netscape')
           {
           if(parseInt(navigator.appVersion) == 5)
              return(parseInt(layer.style.zIndex));
           if(parseInt(navigator.appVersion) == 4)
              return(layer.zIndex);
           }
         else
           {
           return(layer.style.zIndex);
           }
         }

function GetX(layer)
         {
         if(navigator.appName == 'Netscape')
           {
           if(parseInt(navigator.appVersion) == 5)
              return(parseInt(layer.style.left));
           if(parseInt(navigator.appVersion) == 4)
              return(layer.left);
           }
         else
           {
           return(layer.style.pixelLeft);
           }
         }

function GetW(layer)
         {
         if(navigator.appName == 'Netscape')
           {
           if(parseInt(navigator.appVersion) == 5)
              return(parseInt(layer.style.width));
           if(parseInt(navigator.appVersion) == 4)
              return(layer.clip.width);
           }
         else
           {
           if(navigator.appVersion.indexOf('MSIE 4') > 0)
              return(layer.style.pixelWidth);
           else
              return(layer.offsetWidth);
           }
         }

function GetY(layer)
         {
         if(navigator.appName == 'Netscape')
           {
           if(parseInt(navigator.appVersion) == 5)
              return(parseInt(layer.style.top));
           if(parseInt(navigator.appVersion) == 4)
              return(layer.top);
           }
         else
           {
           return(layer.style.pixelTop);
           }
         }

function GetH(layer)
         {
         if(navigator.appName == 'Netscape')
           {
           if(parseInt(navigator.appVersion) == 5)
              return(parseInt(layer.style.height));
           if(parseInt(navigator.appVersion) == 4)
              return(layer.clip.height);
           }
         else
           {
           if(navigator.appVersion.indexOf('MSIE 4') > 0)
              return(layer.style.pixelHeight);
           else
              return(layer.offsetHeight);
           }
         }

function Move(x, y, layer)
         {
         if(navigator.appName == 'Netscape')
           {
           if(parseInt(navigator.appVersion) == 5)
             {
             layer.style.left = x;
             layer.style.top = y;
             }
           if(parseInt(navigator.appVersion) == 4)
             {
             layer.left = x;
             layer.top = y;
             }
           }
         else
           {
           layer.style.pixelLeft = x;
           layer.style.pixelTop = y;
           }
         }

function PickUp(layer)
         {
         var CurrentZ = GetZ(Layers[layer].id);
         SetZ(Layers.length - 1, Layers[layer].id);
         var currentZ;
         for(var index = 0; index < Layers.length; index++)
            {
            currentZ = GetZ(Layers[index].id);
            if(currentZ >= CurrentZ && index != layer)
              {
              SetZ(currentZ - 1, Layers[index].id);
              }
            }
         }

function Selected(x, y, layer)
         {
         if(navigator.appName == 'Netscape')
           {
           if(parseInt(navigator.appVersion) == 5)
              if(x > parseInt(layer.style.left) && x < parseInt(layer.style.left) + parseInt(layer.style.width) &&
                 y > parseInt(layer.style.top) && y < parseInt(layer.style.top) + parseInt(layer.style.height))
                 return(true);
           if(parseInt(navigator.appVersion) == 4)
              if(x > layer.left && x < layer.left + layer.clip.width &&
                 y > layer.top && y < layer.top + layer.clip.height)
                 return(true);
           }
         else
           {
           if(navigator.appVersion.indexOf('MSIE 4') > 0)
             {
             if(x > layer.style.pixelLeft && x < layer.style.pixelLeft + layer.offsetWidth &&
                y > layer.style.pixelTop && y < layer.style.pixelTop + layer.offsetHeight)
                return(true);
             }
           else
             {
             if(x > layer.style.pixelLeft && x < layer.style.pixelLeft + layer.offsetWidth &&
                y > layer.style.pixelTop && y < layer.style.pixelTop + layer.offsetHeight)
                return(true);
             }
           }

         return(false);
         }

function mouseDown(e)
         {
         if ((navigator.appName == 'Netscape' && e.which!=1) || (navigator.appName == 'Microsoft Internet Explorer' && event.button!=1)) return true;
         var x = (navigator.appName == 'Netscape')? e.pageX : event.x+document.body.scrollLeft;
         var y = (navigator.appName == 'Netscape')? e.pageY : event.y+document.body.scrollTop;
         if (navigator.appName == 'Netscape' && e.target!=document) routeEvent(e);

         ClickedLayer = -1;

         //Check if a div was clicked on.
         for(var layer = 0; layer < Layers.length; layer++)
            {
            if(Selected(x, y, Layers[layer].id))
              {
              if(ClickedLayer == -1)
                {
                Layers[layer].ClickedX = x - GetX(Layers[layer].id);
                Layers[layer].ClickedY = y - GetY(Layers[layer].id);
                ClickedLayer = layer;
                }
              else
                //If divs are overlapping, pick the one on top.
                if(GetZ(Layers[layer].id) > GetZ(Layers[ClickedLayer].id))
                  {
                  Layers[layer].ClickedX = x - GetX(Layers[layer].id);
                  Layers[layer].ClickedY = y - GetY(Layers[layer].id);
                  ClickedLayer = layer;
                  }
              }
            }

         if(ClickedLayer != -1)
           {
           PickUp(ClickedLayer);
           }

         if(ClickedLayer == -1) return true;
         else return false;
         }

function mouseMove(e)
         {
         var x = (navigator.appName == 'Netscape')? e.pageX : event.x+document.body.scrollLeft;
         var y = (navigator.appName == 'Netscape')? e.pageY : event.y+document.body.scrollTop;
         if (navigator.appName == 'Netscape' && e.target!=document) routeEvent(e);

         //If a div is selected,
         //make it follow the mouse cursor.

         if(ClickedLayer != -1)
           {
           Move(x - Layers[ClickedLayer].ClickedX,
                y - Layers[ClickedLayer].ClickedY,
	       Layers[ClickedLayer].id);
           }

         if(ClickedLayer == -1) return true;
         else return false;
         }

function mouseUp(e)
         {
         var x = (navigator.appName == 'Netscape')? e.pageX : event.x+document.body.scrollLeft;
         var y = (navigator.appName == 'Netscape')? e.pageY : event.y+document.body.scrollTop;
         if (navigator.appName == 'Netscape' && e.target!=document) routeEvent(e);

         ClickedLayer = -1;

         return true;
         }

function init()
         {
         ClickedLayer = -1;
         document.onmousedown = mouseDown;
         document.onmousemove = mouseMove;
         document.onmouseup = mouseUp;
         if(navigator.appName == 'Netscape')
            document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);

         Layers = new Array();
         Layers[0] = new Layer('Drag', 0, 0);
         Layers[1] = new Layer('Drop', 0, 0);
         }
</script>
</head>

<body onload="init();" unselectable="no"
      bgcolor="ffeedd" scroll="no"
      topmargin="0" rightmargin="0" leftmargin="0" marginheight="0" marginwidth="0">

<div id="Drop" style="POSITION: absolute; CURSOR: hand;">
<table  bgcolor="ee9933" cellpadding="5" cellspacing="0" border="1" bordercolor="00000">
<tr>
<td align="center"><font face="verdana, arial" color="ffee00" size="5"><b>
Drop</b></font></td>
</tr></table></div>

<div id="Drag" style="POSITION: absolute; CURSOR: hand;">
<table  bgcolor="ee9933" cellpadding="5" cellspacing="0" border="1" bordercolor="00000">
<tr>
<td align="center"><font face="verdana, arial" color="ffee00" size="5"><b>
Drag</b></font></td>
</tr></table></div>
</body>
</html>