dropEffect Property

Sets or retrieves the type of drag-and-drop operation and the type of cursor to display.

Syntax

dataTransfer.dropEffect [ = sCursorStyle ]

Possible Values

sCursorStyle String that specifies or receives one of the following values.
copy Copy cursor is displayed.
link Link cursor is displayed.
move Move cursor is displayed.
none Default. No cursor is specified. Instead, the no-drop cursor is displayed.
The property is read/write. The property has a default value of none.

Remarks

For dropEffect to work, it must be used with the effectAllowed property. These properties are set on the source object of a drag-and-drop operation. The effectAllowed property determines which drag-and-drop operations are available from the source object. The dropEffect property determines which drag-and-drop operations are allowed on the target object. For example, the source object might set the effectAllowed property to all drag-and-drop operations, while the target object specifies that the dropEffect allows only copy operations.
The recommended technique for dropping text is to set the dropEffect in the target object's event handler function for the following events: ondragenter, ondragover, and ondrop. The effectAllowed property must be set in one of the source object's drag-and-drop event handlers, such as the ondragstart event.
The target object of a drag-and-drop operation can set the dropEffect during the ondragenter, ondragover, and ondrop events. To display the desired cursor until the final drop, the default action of the ondragenter, ondragover, and ondrop events must be canceled and the dropEffect must be set. Otherwise, the copy cursor, move cursor, or link cursor set by this property displays only until the first valid drop target is intersected, at which point the cursor is replaced by the drop/no-drop cursor for the rest of the drag operation.
Microsoft® Internet Explorer delivers default drag-and-drop functionality for a, img, textArea, and input type=text. When one of these objects is the source element, the default drop effect cannot be overridden by setting the dropEffect property of the target element. Instead, the source object's default behavior must be canceled.

Example

This example uses the dropEffect and effectAllowed properties of the dataTransfer object to display the move cursor.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Example of the effectAllowed and dropEffect Properties</TITLE>
<SCRIPT>
// This function is called when the user
//  initiates a drag-and-drop operation.
function fnHandleDragStart()
{
var oData = window.event.dataTransfer;
// Set the effectAllowed on the source object.
oData.effectAllowed = "move";
}
// This function is called by the target
//  object in the ondrop event.
function fnHandleDrop()
{
var oTarg = window.event.srcElement;
var oData = window.event.dataTransfer;
// Cancel default action.
fnCancelDefault();
// Set the content of the oTarget to the information stored
//  in the data transfer object in the desired format.
oTarg.innerText += oData.getData("text");
}
// This function sets the dropEffect when the user moves the
//  mouse over the target object.
function fnHandleDragEnter()
{
var oData = window.event.dataTransfer;
// Cancel default action.
fnCancelDefault();
// Set the dropEffect for the target object.
oData.dropEffect = "move";
}
function fnCancelDefault()
{
// Cancel default action.
var oEvent = window.event;
oEvent.returnValue = false;
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Example of the effectAllowed and dropEffect Properties</H1>
<P>The code in this example sets the <B>effectAllowed</B> property
to <SPAN CLASS="literal">move</SPAN>. It sets the <B>dropEffect</B>
property to display the move cursor. The default action must be
canceled in all events that are handled&#151;in this example,
<B>ondragstart</B>, <B>ondragover</B>, <B>ondragenter</B>, and
<B>ondrop</B>.</P>
<B>
[not this text]
<SPAN ID="oSource" ondragstart="fnHandleDragStart()">
[select and drag this text]
</SPAN>
[not this text]
</B>
<P><BR><P>
<DIV ID="oTarget"
STYLE="background:beige;
height:100;
width:200;
border:solid black 1px;"
ondrop="fnHandleDrop()"
ondragover="fnCancelDefault()"
ondragenter="fnHandleDragEnter()">
[drop text here]
</DIV>
</BODY>
</HTML>

This feature requires Microsoft® Internet Explorer 5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Standards Information

There is no public standard that applies to this property.

Applies To

dataTransfer