↑
Main Page

dropEffect and effectAllowed

This is essentially the same as the last example, with the exception that the call to the

dataTransfer

.getData()

method retrieves the text that was being dragged. When you drop that text onto the red

<div/>

, this example pops up an alert displaying the text you were dragging.

You may be wondering, what would happen if you used

getData()

with the argument

“URL”

instead

“text”

? In this example, it would return a

null

value because the data is stored as text and, there-

fore, must be retrieved as text.

If instead you were to drag a link onto the red

<div/>

, you could use

getData()

with the

“URL”

format

to retrieve the link:

<html>

<head>

<title>System Drag And Drop Example</title>

function handleDragDropEvent(oEvent) {

switch(oEvent.type) {

case “dragover”:

case “dragenter”:

oEvent.returnValue = false;

break;

case “drop”:

alert(oEvent.dataTransfer.getData(“URL”));

}

</script>

</head>

<body>

<p>Try dragging the link to the red square.

It will show you the URL when dropped.</p>

<div style=”background-color: red; height: 100px; width: 100px”

ondragenter=”handleDragDropEvent(event)”

ondragover=”handleDragDropEvent(event)”

ondrop=”handleDragDropEvent(event)”></div></p>

</body>

</html>

When you begin dragging a link, the browser calls

setData()

and stores the

href

attribute as a URL.

Using

getData()

and asking for the URL format, you can retrieve this value. So what is really the dif-

ference between the text and URL format?

When you specify data to be stored as text, it gets no special treatment whatsoever. In a manner of

speaking, “it’s just dumb text.” When you specify data to be stored as a URL, however, it is treated just

like a link on a Web page, meaning that if you drop it onto another browser window, the browser will

navigate to that URL. This is discussed further later on.

dropEffect and effectAllowed

The

dataTransfer

object can be used to do more than simply transport data to and fro; it can also be

used to determine what type of actions can be done with the dragged item and the drop target. You

accomplish this by using two properties:

dropEffect

and

effectAllowed

395

Drag and Drop

16_579088 ch13.qxd 3/28/05 11:40 AM Page 395