Dragging and Dropping Using Layers

You also can implement dragging and dropping using layers in Netscape Navigator 4.0. Here's an example that does exactly that. This example works by capturing the mouse down, mouse move, and mouse up events in a layer with the captureEvents method, and moves the layer (which contains the image to be dragged) in response to mouse movements:

(Listing 17-04.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Dragging and Dropping Using Layers          </TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--             function init()              {                  document.layers.layer1.captureEvents(Event.MOUSEDOWN);                  document.layers.layer1.onmousedown = mouseDown              }              function mouseDown(e)              {                  document.layers.layer1.offX = e.pageX-document.layers.layer1.pageX                  document.layers.layer1.offY = e.pageY-document.layers.layer1.pageY                  window.captureEvents(Event.MOUSEMOVEEvent.MOUSEUP)                  window.onmousemove = mouseDrag                  window.onmouseup = mouseUp                  return false              }              function mouseDrag(e)              {                  document.layers.layer1.pageX = e.pageX-document.layers.layer1.offX                  document.layers.layer1.pageY = e.pageY-document.layers.layer1.offY                  return false              }              function mouseUp ()              {                  window.releaseEvents(Event.MOUSEMOVE  Event.MOUSEUP)                  return false              }              //-->          </SCRIPT>      </HEAD>       <BODY ONLOAD="init()">          <H1>              Dragging and Dropping Using Layers          </H1>          <LAYER NAME="layer1" LEFT="100" TOP="100">              <IMG SRC="image1.jpg">          </LAYER>      </BODY>  </HTML>

You can see the results of this code in Figure 17.6 in the Netscape Navigator 4.0, where I'm dragging an image using layers.

Figure 17.6. Dragging and dropping using layers in the Netscape Navigator 4.0.

graphics/17fig06.gif