The ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, and ondrop Events


The ondrag , ondragend, ondragenter, ondragleave, ondragover, ondragstart, and ondrop Events

These events are used in drag-and-drop operations, and we'll see them in more detail in Chapter 17. You can find the support for these events in Table 6.67.

Table 6.67. The ondrag , ondragend , ondragenter , ondragleave , ondragover , ondragstart , and ondrop Events

Event

NS2

NS3

NS4

NS6

IE3a

IE3b

IE4

IE5

IE5.5

IE6

ondrag

             

x

x

x

ondragend

             

x

x

x

ondragenter

             

x

x

x

ondragleave

             

x

x

x

ondragover

             

x

x

x

ondragstart

           

x

x

x

x

ondrop

             

x

x

x

We'll see more about dragging and dropping in Chapter 17, but here's a preview. In this example, I'll drag and drop not just a visual object, but data . Here, I'll connect some text data with an event object, and let the user drag that data to a target and drop it. We'll see more on how this works in Chapter 17:

(Listing 06-15.html on the web site)
 <HTML>      <HEAD>          <TITLE>              Dragging and Dropping Data          </TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  function startDrag()   {   event.dataTransfer.setData("Text",   "The data was passed to the target!");   event.dataTransfer.effectAllowed = "copy"   }   function endDrag()   {   event.returnValue = false   event.dataTransfer.dropEffect = "copy"   droptarget.innerHTML =   event.dataTransfer.getData("Text")   }   function dragOver()   {   event.returnValue = false   event.dataTransfer.dropEffect = "copy"   }  // -->          </SCRIPT>      </HEAD>      <BODY>          <H1>Dragging and Dropping Data</H1>  <IMG SRC="dragger.jpg" ondragstart="startDrag()">   <DIV ID="droptarget"   style="background:green; width:300; height:100;"   ondragenter="dragOver()" ondrop="endDrag()"   ondragover="dragOver()">   Drop the data here...   </DIV>  </BODY>  </HTML> 

You can see the results in Figure 6.10, where I'm dragging the data from the top image to the target, and Figure 6.11, where I've dropped the text dataand that text appears in the target. For the details, see Chapter 17.

Figure 6.10. Dragging data.

graphics/06fig10.gif

Figure 6.11. Dropping data.

graphics/06fig11.gif



Inside Javascript
Inside JavaScript
ISBN: 0735712859
EAN: 2147483647
Year: 2005
Pages: 492
Authors: Steve Holzner

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net