DHTML Object Properties DHTML Objects
Specifies on the target element which cursor to display during a drag-and-drop operation.
| HTML |
N/A |
| Script |
window.dataTransfer.dropEffect [ = sCursorStyle ] |
| copy |
String specifying the "copy" cursor. |
| link |
String specifying the "link" cursor. |
| move |
String specifying the "move" cursor. |
| none |
String that indicates no cursor is specified. The no-drop cursor displays instead. |
The property is read/write with a default value of none.
The target object 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, move, or link cursor set by this property displays only until the first valid drop target is intersected, at which point it is replaced by the drop/no-drop cursors for the duration of the drag operation.
The drag-and-drop behaviors implemented in Internet Explorer® 4.0 and honored by Internet Explorer® 5 can affect dropEffect behavior in certain situations. Internet Explorer® delivers default drag-and-drop functionality for anchor, image, TEXTAREA, and text box.
When one of these objects comprises the source element, the default drop effect cannot be overridden by setting the dropEffect of the target element. The source object’s default behavior must be canceled.
For dropEffect to work, it must be used in conjunction with the effectAllowed property of the source object. The actual value—whether copy, move, or link—must match that set in effectAllowed. If effectAllowed is not explicitly set, then dropEffect must be set to the default value of effectAllowed for that particular source object.
The dropEffect property applies standard system cursors.
The example demonstrates how to set the dropEffect and effectAllowed properties of the dataTransfer object.
<head>
<script language="JavaScript">
var sMoveText;
var sSaveDiv = "";
var sSaveSpan = "";
// Changes to text of target and source objects
// must be manually coded.
function fnSetInfo ( ) {
sSaveDiv = oTarget.innerText;
// Updates text in target object.
sSaveSpan = oSource.innerText;
// Updates text in source object.
window.dataTransfer.effectAllowed = "move";
// Moves text.
}
// This function is called by the target object
// in the ondrop event.
function fnGetInfo ( ) {
event.returnValue = false;
// Cancels default action.
window.dataTransfer.dropEffect = "move";
// Sets cursor to system move icon.
sMoveText = window.dataTransfer.getData ( "Text" );
// Specifies data format to retrieve.
oTarget.innerText = sMoveText;
/* And sets the innerText property of oTarget object
to the information from getData. */
}
function fnCancelDefault ( ) {
// Cancel default action in ondragenter
// and ondragover so that copy cursor will
// display until selection is dropped.
event.returnValue = false;
window.dataTransfer.dropEffect = "copy";
}
</script>
</head>
<body>
<B>
[ not this text ]
<span id=oSource ondragstart="fnSetInfo ( )">
[ select and drag this text ]
</span>
[ not this text ]
</B>
<div id=oTarget ondrop="fnGetInfo ( )"
ondragover="fnCancelDefault ( )"
ondragenter="fnCancelDefault ( )"> [ drop text here ]
</div>
</body>
This feature requires Microsoft® Internet Explorer® 4.0 or later.
Show me
dataTransfer
Data Transfer Overview, clearData, effectAllowed, getData, setData