↑
Main Page

URL

The

dropEffect

property is set on the drop target to determine which type of drop behavior is allowed.

These are four possible values:

“none”

— A dragged item cannot be dropped here. This is the default value for everything but

text boxes.

“move”

— Indicates that the dragged item should be moved to the drop target.

“copy”

— Indicates that the dragged item should be copied to the drop target.

“link”

— Indicates that the drop target will navigate to the dragged item (but only if it is a URL).

Each of these values causes a different cursor to be displayed when an item is dragged over the drop

target. It is up to you, however, to actually cause the actions indicated by the cursor. In other words,

nothing is automatically moved, copied, or linked without your direction intervention. The only thing

you get for free is the cursor change. In order to use the

dropEffect

property, it must be set in the

ondragenter

event handler for the drop target.

The

dropEffect

property is useless unless you also set the

effectAllowed

property on the dragged

item. This property indicates which

dropEffect

is allowed for the dragged item. The possible values

are the following:

“uninitialized”

— No action has been set for the dragged item.

“none”

— No action is allowed on the dragged item.

“copy”

— Only

dropEffect “copy”

is allowed.

“link”

— Only

dropEffect “link”

is allowed.

“move”

— Only

dropEffect “move”

is allowed.

“copyLink”

—

dropEffect

“copy”

and

“link”

are allowed.

“copyMove”

—

dropEffect

“copy”

and

“move”

are allowed.

“linkMove”

—

dropEffect

“link”

and

“move”

are allowed.

“all”

— All

dropEffect

s are allowed.

This property must be set inside the

ondragstart

event handler.

Suppose you want to allow a user to move text from a text box into a

<div/>

. You must set both

dropEffect

and

effectAllowed

“move”

. But alas, the text won’t automatically move itself because

the default behavior for the drop event on a

<div/>

is to do nothing. If you override the default behav-

ior, the text is automatically removed from the text box. It is then up to you to insert it into the

<div/>

using the

innerHTML

property:

<html>

<head>

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

function handleDragDropEvent(oEvent) {

switch(oEvent.type) {

case “dragstart”:

396

Chapter 13

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