DHTML Object Properties DHTML Objects
Specifies on the source element what data transfer operations are allowed for the object.
| HTML |
N/A |
| Script |
window.dataTransfer.effectAllowed [ = sEffect ] |
| copy |
String specifying that the selection will be copied. |
| link |
String specifying that the data transfer operation will link the selection to the drop target. |
| move |
String specifying that the selection will be moved to the target location when dropped. |
| copyLink |
String specifying that the selection will be copied or linked, depending on the target default. |
| copyMove |
String specifying that the selection will be copied or moved, depending on the target default. |
| linkMove |
String specifying that the selection will be linked or moved, depending on the target default. |
| all |
String specifying that all drop effects are supported. |
| none |
String specifying that dropping is disabled and that the no-drop cursor will display. |
| uninitialized |
String specifying that no value has been set through the effectAllowed property. In this case, the default effect still works, even though it cannot be queried through this property. |
The property is read/write with a default value of copy.
Set the effectAllowed property in the ondragstart event. This property is used most effectively in conjunction with the dropEffect property.
This property can be used to override the default behavior in other applications. For example, the browser script can set the effectAllowed property to copy and thereby override the Microsoft® Word default of move. Within the browser, copy is the default effectAllowed behavior, except for anchors, which are set to link by default.
Setting effectAllowed to none disables dropping but still displays the no-drop cursor. To avoid the no-drop cursor, cancel the returnValue of the ondragstart window.
This example demonstrates how to move text in a drag-and-drop operation.
<head>
<script language="JavaScript">
var sMoveText;
var sSaveDiv = "";
var sSaveSpan = "";
function Initiate_Drag ( ) {
sSaveDiv = oTarget.innerText;
// Updates text in target object.
sSaveSpan = oSource.innerText;
// Updates text in source object.
window.dataTransfer.effectAllowed = "move";
// Moves text.
}
function Finish_Drag ( ) {
event.returnValue = false;
// Cancels the default action.
window.dataTransfer.dropEffect = "move";
// Sets the cursor to the move icon.
sMoveText = window.dataTransfer.getData ( "Text" );
// Specify data format to retrieve.
oTarget.innerText = sMoveText;
}
function Over ( ) {
// Cancel the default action in ondragover
event.returnValue = false;
}
// and ondrop so that move cursor will
// display until selection is dropped.
function Drop ( ) {
event.returnValue = false;
// Cancels the default action.
}
</script>
</head>
<body>
<B>
[ not this text ]
<span id=oSource ondragstart="Initiate_Drag ( )">
[ select and drag this text ]
</span>
[ not this text ]
</B>
<div id=oTarget ondragenter="Finish_Drag ( )"
ondragover="Over ( )"
ondrop="Drop ( )"> [ drop text here ] </div>
</body>
This feature requires Microsoft® Internet Explorer® 5 or later.
Show me
dataTransfer
Data Transfer Overview, clearData, dropEffect, getData, setData