The ondrag , ondragend, ondragenter, ondragleave, ondragover, ondragstart, and ondrop EventsThese 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
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.
Figure 6.11. Dropping data.
|