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

Chapter 17. Dynamic HTML: Drag and Drop,... > Dragging and Dropping Using Layers

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.MOUSEMOVE|Event.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> 

					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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