• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 15. Dragging Layers > The Whole Thing

The Whole Thing

To make life a little easier for those of you coding at home, Example 15-7 has the whole enchilada, beginning to end.

Example 15-7. All the code at once

<html>
<head>
    <title>Shelly Biotech</title>

    <style type="text/css">

    #logo {position:absolute;        left:64;    top:20;}
    #build {position:absolute;       left:434;   top:38;}
    #central {position:absolute;     left:254;,  top:256;}
    #button {position:absolute;      left:501;   top:614;}

    #molecule0 {position:absolute;       left:298;  top:85;}
    #molecule45 {position:absolute;      left:448;  top:147;}
    #molecule90 {position:absolute;      left:510;  top:296;}
    #molecule135 {position:absolute;     left:448;  top:444;}

    #molecule180 {position:absolute;left:298;     top:507;}
    #molecule225 {position:absolute;left:151;     top:444;}
    #molecule270 {position:absolute;left:88;      top:296;}
    #molecule315 {position:absolute;left:151;     top:147;}


    </style>

<script language="JavaScript">

/*
** Some needed global variables
*/
selectedMolecule = null
layerNameArray = new
Array("molecule0","molecule45","molecule90","molecule135",
"molecule180","molecule225","molecule270","molecule315")

/*
**  still need to do a bit of browser checking
*/
browser = navigator.appName
browserNum = parseInt(navigator.appVersion)
N4 = false
N6 = false
IE = false

/*
** Decide which browser the user is using
*/
if ((browser == "Netscape") && (browserNum < 5)) N4 = true
else if ((browser == "Netscape") && (browserNum >= 5)) N6 =
    true
else IE = true


// Set zIndex property
function setzIndex(molecule, zOrder)
{
    if (N6)
    {
      molecule.style.zIndex = zOrder
    }
    else
    {
      molecule.zIndex = zOrder
    }
}

// Position an object at a specific pixel coordinate
function shiftTo(molecule, x, y)
{
   if (N4)
   {
      molecule.moveTo(x,y)
   }
   else if (N6)
   {
      molecule.style.left = x
      molecule.style.top = y
   }
   else
   {
      molecule.pixelLeft = x
      molecule.pixelTop = y
   }
}


function setSelectedElem(e)
{
    if (N4)
    {
      clickX = e.pageX
      clickY = e.pageY

      // start looking at all the layers on the page,
      // from the top layer down
      for (i=document.layers.length - 1; i >= 0; i--)
      {
        testObj = document.layers[i]

        // see if user clicked on a valid layer
        for(j=0;j<layerNameArray.length;j++)
        {
          if ((testObj.id == layerNameArray[j])
            && (clickX > testObj.left) &&
            (clickX < testObj.left +
            testObj.clip.width) &&
            (clickY > testObj.top) &&
            (clickY < testObj.top +
            testObj.clip.height))
          {
            selectedMolecule = testObj
            setzIndex(selectedMolecule, 100)
            return
          }
        }
      }
    }
    else
    {
      imgObj = window.event.srcElement
      testObj = imgObj.parentElement.style

      // see if the user clicked on a valid layer
      layerName = imgObj.parentElement.id
      for(i=0;i<layerNameArray.length;i++)
      {
        if (layerName == layerNameArray[i] &&
        testObj)
        {
          selectedMolecule = testObj
          setzIndex(selectedMolecule,100)
          return
        }
      }
    }
}



function dragMolecule(e)
{
    if (selectedMolecule)
    {
      if (IE)
      {
        x = window.event.clientX - offsetX
        y = window.event.clientY - offsetY
      }
      else
      {
        x = e.pageX - offsetX
        y = e.pageY - offsetY
      }
      shiftTo(selectedMolecule,x,y)

      // prevent further system response to dragging
      return false
    }
}



function grabMolecule(e)
{
    if (N6)
    {
      offsetX = e.layerX
      offsetY = e.layerY
      selectedMolecule = this
      setzIndex(selectedMolecule,100)
    }
    else
    {
      setSelectedElem(e)
      if (selectedMolecule)
      {
        if (N4)
        {
          offsetX = e.pageX -
              selectedMolecule.left
          offsetY = e.pageY -
              selectedMolecule.top
        }
        else
        {
          offsetX = window.event.offsetX
          offsetY = window.event.offsetY
        }
      }

      // prevent further processing of mouseDown event
      // so that the Macintosh doesn't display the
      // contextual menu and lets dragging work
      // normally.
      return false

    }
}

function releaseMolecule(e)
{
    if (selectedMolecule)
    {
      //  Determine where user released mouse button
      //  and define the shopping cart object
      if (IE)
      {
        releaseX = window.event.clientX
        releaseY = window.event.clientY

        // Have to hard-code this for IE - Windows
        // For some reason, it doesn't see the
        // "left" or "top" property until it's
        // explicity set like this
        document.all["central"].style.left = 254
        document.all["central"].style.top = 256

        centralObj = document.all["central"].style
        centralWidth =
          document.all["central"].offsetWidth
        cartHeight =
          document.all["central"].offsetWidth
        centralLeft = centralObj.pixelLeft
        centralTop = centralObj.pixelTop
      }
      else
      {
        releaseX = e.pageX
        releaseY = e.pageY
        if (N6)
        {
          // have to hard-code this for Netscape
          // 6. For some reason, it doesn't see
          // the "left" or "top" property until
          // it's explicity set like this

          document.getElementById("central").
            style.left = 254
          document.getElementById("central").
            style.top = 256

          centralObj = document.getElementById
            ("central").style
          centralWidth =
            document.getElementById
            ("central").offsetWidth
          centralHeight =
            document.getElementById
            ("central").offsetHeight
          centralLeft = parseInt(document.
            getElementById("central").
            style.left)
          centralTop = parseInt(document.
            getElementById("central").
            style.top)
        }
        else
        {
          centralObj =
            document.layers["central"]
          centralWidth = document.
            layers["central"].clip.width
          centralHeight = document.
            layers["central"].clip.height
          centralLeft = document.
            layers["central"].left
          centralTop = document.
            layers["central"].top
        }
      }

      //  See if user released inside of cart object
      if ((releaseX > centralLeft) &&
        (releaseX < centralLeft + centralWidth) &&
        (releaseY > centralTop) &&
        (releaseY < centralTop + centralHeight))
      {
        alert("molecule in chamber");
      }

      // turn off Molecule
      setzIndex(selectedMolecule, 0)
      selectedMolecule = null
    }
}


function attachEvent(obj)
{
    obj.addEventListener("mousedown",grabMolecule,false)
    obj.addEventListener("mouseup",releaseMolecule,false)
}




function init()
{
    if(N6)
    {
      molecule0 = document.getElementById("molecule0")
      molecule45 =
        document.getElementById("molecule45")
      molecule90 =
        document.getElementById("molecule90")
      molecule135 =
        document.getElementById("molecul135")
      molecule180 =
        document.getElementById("molecule180")
      molecule225 =
        document.getElementById("molecule225")
      molecule270 =
        document.getElementById("molecule270")
      molecule315 =
        document.getElementById("molecule315")

      attachEvent(molecule0)
      attachEvent(molecule45)
      attachEvent(molecule90)
      attachEvent(molecule135)
      attachEvent(molecule180)
      attachEvent(molecule225)
      attachEvent(molecule270)
      attachEvent(molecule315)

      window.onmousemove = dragMolecule
    }
    else
    {
      if (N4) setNSEventCapture()
      document.onmousedown = grabMolecule
      document.onmousemove = dragMolecule
      document.onmouseup = releaseMolecule
    }
}


// Set event capture for Navigator 4.x
function setNSEventCapture()
{
    document.captureEvents(Event.MOUSEDOWN |
        Event.MOUSEMOVE | Event.MOUSEUP)
}

</script>

</head>
<body bgcolor="#000000" marginheight="0" marginwidth="0"
  onLoad="init()">

<div id="logo">
<img src="images/shelley.gif" width="257" height="41">
</div>

<div id="build">
<img src="images/buildaprotein.gif" width="222" height="20">
</div>

<div id="central">
<img src="images/dragbox.gif" width="194" height="178">
</div>

<div id="molecule0">
<img src="images/molecule0.jpg" width="103" height="124">
</div>

<div id="molecule45">
<img src="images/molecule45.jpg" width="103" height="122">
</div>

<div id="molecule90">
<img src="images/molecule90.jpg" width="103" height="124">
</div>

<div id="molecule135">
<img src="images/molecule135.jpg" width="103" height="121">
</div>

<div id="molecule180">
<img src="images/molecule180.jpg" width="103" height="121">
</div>

<div id="molecule225">
<img src="images/molecule225.jpg" width="103" height="121">
</div>

<div id="molecule270">
<img src="images/molecule270.jpg" width="103" height="124">
</div>

<div id="molecule315">
<img src="images/molecule315.jpg" width="103" height="122">
</div>


<div id="button">
<img src="images/submit.gif" width="144" height="32">
</div>


</body>
</html>


					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint