Besides dragging and dropping visual elements, you also can drag and drop data . This is already implemented in both Netscape Navigator 4+ and Internet Explorer 4+ to some extent. For example, you can select and drag page text in both browsers and drop it into another application (such as a word processor) or a text-oriented control in the same page. Here's an example that just displays text and a text field: (Listing 17-02.html on the web site)<HTML> <HEAD> <TITLE>Dragging Selected Text</TITLE> </HEAD> <BODY> <H1>Dragging Selected Text</H1> Select some of this text and drag it to the text field! <BR> <INPUT TYPE="TEXT" NAME="text1"> </BODY> </HTML> You can see the results of this code in Figure 17.2, where I've selected some text and am about to drop it. You can see the standard drag-and-drop mouse cursor in that figure, showing that a drag-and-drop operation is occurring. In Figure 17.3, I've dropped the text into the text field. Figure 17.2. Dragging text in the Netscape Navigator.
Figure 17.3. Dropping text in the Netscape Navigator.
You also can implement this kind of operation yourself in the Internet Explorer, using the dataTransfer object (not available in the Netscape Navigator, and available in the Internet Explorer as of version 5.0). The dataTransfer object has two properties; the first is dropEffect , which sets or gets the type of drag-and-drop operation and the type of cursor to display. Here are the possible values:
The second property is effectAllowed , which sets or gets which data transfer operations are allowed for the object. Here are the possible values:
The dataTransfer object also supports these methods :
Let's look at an example to make how this works clear. In this case, I'll associate some text data with an image, and when the user drags the image to a <DIV> element, I'll transfer the text data to that <DIV> . We start with the ONDRAGSTART attribute of the image, calling a function we'll name beginDrag : <IMG SRC="image1.jpg" ONDRAGSTART="beginDrag()"> In the beginDrag function, I'll use the dataTransfer property of the event object, setting the allowed drag-and-drop operation to "copy" (which sets the mouse cursor), and adding the text data "This is the text data for the drag operation." to the dataTransfer object: function beginDrag() { event.dataTransfer.effectAllowed = "copy" event.dataTransfer.setData("Text", "This is the text data for the drag operation.") } We'll use a <DIV> element as the drop target in this example. To do that, I'll use the ONDRAGENTER (occurs when the mouse first enters the object), ONDRAGOVER (occurs as the mouse moves over the object), and ONDROP (occurs when the data is dropped) attributes. Here's what the <DIV> element looks like: <DIV ID="droptarget" STYLE="background:cyan; width:200; height:50;" ONDRAGENTER="dragEnter()" ONDROP="endDrag()" ONDRAGOVER="dragEnter()"> Drag the image and drop it here... </DIV> For the ONDRAGENTER and ONDRAGOVER events, I'll use the same function, dragEnter , to indicate that the <DIV> is a working drop target by setting the dropEffect property of the event object to "copy". This changes the mouse cursor from a circle and bar "no-drop" symbol to the cursor you see in Figure 17.4: Figure 17.4. Dragging data in the Internet Explorer.
function dragEnter() { event.dataTransfer.dropEffect = "copy" event.returnValue = false return false } When the data is dropping into the <DIV> element, the code calls a function I'll name endDrag . In that function, I use the dataTransfer object's getData method to get the text associated with the drag-and-drop operation and display it in the <DIV> element: function endDrag() { event.dataTransfer.dropEffect = "copy" droptarget.innerHTML = event.dataTransfer.getData("Text") event.returnValue = false return false } That's all there is to it. You can see the dropped data in Figure 17.5. Now we're dragging and dropping data in the Internet Explorer. Figure 17.5. Dropping data in the Internet Explorer.
Here's the whole code for this example: (Listing 17-03.html on the web site)<HTML> <HEAD> <TITLE> Dragging And Dropping Data </TITLE> <SCRIPT> <!-- function beginDrag() { event.dataTransfer.effectAllowed = "copy" event.dataTransfer.setData("Text", "This is the text data for the drag operation.") } function dragEnter() { event.dataTransfer.dropEffect = "copy" event.returnValue = false return false } function endDrag() { event.dataTransfer.dropEffect = "copy" droptarget.innerHTML = event.dataTransfer.getData("Text") event.returnValue = false return false } //--> </SCRIPT> </HEAD> <BODY> <H1>Dragging And Dropping Data</H1> <IMG SRC="image1.jpg" ONDRAGSTART="beginDrag()"> <DIV ID="droptarget" STYLE="background:cyan; width:200; height:50;" ONDRAGENTER="dragEnter()" ONDROP="endDrag()" ONDRAGOVER="dragEnter()"> Drag the image and drop it here... </DIV> </BODY> </HTML> |