Dragging and Dropping Data | Inside JavaScript

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.

graphics/17fig02.gif

Figure 17.3. Dropping text in the Netscape Navigator.

graphics/17fig03.gif

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:

"copy" . Copy cursor is displayed.
"link" . Link cursor is displayed.
"move" . Move cursor is displayed.
"none" . This is the default. The no-drop cursor is displayed.

The second property is effectAllowed , which sets or gets which data transfer operations are allowed for the object. Here are the possible values:

"copy" . The selection is copied .
"link" . The selection is linked to the drop target.
"move" . The selection is moved to the target when dropped.
"copyLink" . The selection is copied or linked, depending on the target's default.
"copyMove" . The selection is copied or moved, depending on the target's default.
"linkMove" . The selection is linked or moved, depending on the target's default.
"all" . All drop effects are supported.
"none" . Dropping is not enabled, and the no-drop cursor is displayed.
" uninitialized " . This is the default. No value has been set through the effectAllowed property. The default effect still works in this case.

The dataTransfer object also supports these methods :

clearData . Clears the current data in the clipboard for a particular data format.

Syntax: dataTransfer.clearData([ format ]) , where format is one of "Text" (text data), "URL" (URL data), "File" (file data), "HTML" (HTML data), or "Image" (image data). Returns: Nothing.
getData . Gets the current data in the clipboard for a particular data format.

Syntax: dataTransfer.getData( format ) , where format is one of "Text" (text data) or "URL" (URL data). Returns: A string holding the data.
setData . clears the current data in the clipboard for a particular data format.

Syntax: dataTransfer.setData( format , data ) ; where format is one of "Text" (text data) or "URL" (URL data), and data is the data to place in the clipboard. This information can be text, a source path to an image, or a URL. When you pass "URL" as the format parameter, you must use the data parameter to specify the location of the object to transfer. Returns: true if successful; false otherwise .

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.

graphics/17fig04.gif

 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.

graphics/17fig05.gif

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>