Click to return to the DHTML, HTML     
DYNSRC Attribute | dynsrc...     ENCTYPE Attribute | encod...     DHTML Properties    
Web Workshop  |  DHTML, HTML & CSS

effectAllowed Property


Sets or retrieves, on the source element, which data transfer operations are allowed for the object.

Syntax

HTML N/A
Scripting event.dataTransfer.effectAllowed[ = sEffect ]

Possible Values

sEffect String that specifies one of the following values:
copy Selection is copied.
linkSelection is linked to the drop target by the data transfer operation.
moveSelection is moved to the target location when dropped.
copyLinkSelection is copied or linked, depending on the target default.
copyMoveSelection is copied or moved, depending on the target default.
linkMoveSelection is linked or moved, depending on the target default.
allAll drop effects are supported.
noneDropping is disabled and the no-drop cursor is displayed.
uninitializedNo value has been set through the effectAllowed property. In this case, the default effect still works, although it cannot be queried through this property.

The property is read/write with a default value of uninitialized.

Expressions can be used in place of the preceding value(s), as of Microsoft® Internet Explorer 5. For more information, see Dynamic Properties.

Remarks

Set the effectAllowed property in the ondragstart event. This property is used most effectively 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 for a text field 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, and text fields, which are set to move by default.

Setting effectAllowed to none disables dropping but still displays the no-drop cursor. To avoid displaying the no-drop cursor, cancel the returnValue of the ondragstart window.

Example

This example uses the dropEffect and effectAllowed properties to move text in a drag-and-drop operation.

Sample Code

<HEAD>
<SCRIPT>
var gsDefault = gsEffect = "move";
function fnSetEffect(){
  var iKey = window.event.keyCode; // check modifier to determine
                                   // appropriate action
  switch (iKey){
     case 67: // c is for cookie (and copy)
        gsEffect = "copy";
break;
     case 77: // m is for move
        gsEffect = "move";
break;
 otherwise: // use default;
    gsEffect = gsDefault;
    break;
  }
}

// Changes to text of target and source objects must be manually coded.
function fnHandleDrag(){                                      
  var oEvent = window.event;
  var oSrc = oEvent.srcElement;
  var oData = window.event.dataTransfer;

  oData.effectAllowed = gsEffect;
  oData.dropEffect = gsEffect;
}


// This function is called by the target object in the ondrop event.
function fnHandleDrop(){
  var oEvent = window.event;
  var oTarg = oEvent.srcElement;
  var oData = window.event.dataTransfer;

  fnCancelDefault(); // cancels default action and manage icon

  /*  
      Sets the content of the oTarget to the information stored 
      in the data transfer object in the desired format. 
  */

  // Hide the data transfer object contents.    
  oTarg.innerText += oData.getData("text");
}

function fnHandleDragOver(){
    fnCancelDefault();
}

function fnHandleDragEnter(){
    fnCancelDefault();
}

function fnCancelDefault(){
  // Cancel default action and manage the drop effect.
  var oEvent = window.event;                   
  oEvent.returnValue = false;                
//  oEvent.dataTransfer.dropEffect = gsEffect;
}
</SCRIPT>
</HEAD>
<BODY>
<B>[not this text]
<SPAN
   ID="oSource"
   onmousedown="fnSetEffect()"
   ondragstart="fnHandleDrag()"
   >[select and drag this text]
</SPAN>
[not this text]
</B>
<DIV ID="oTarget"
   STYLE="background:beige; height:100; width:200"
   ondrop="fnHandleDrop()"
   ondragover="fnHandleDragOver()"
   ondragenter="fnHandleDragEnter()">
[drop text here]
</DIV>
</BODY>
This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

Applies To

[ Object Name ]
PlatformVersion
Win16:
Win32:
Mac:
Unix:
WinCE:
dataTransfer

See Also

DHTML Data Transfer Overview, clearData, getData, setData



Back to topBack to top

Did you find this topic useful? Suggestions for other topics? Write us!

© 1999 Microsoft Corporation. All rights reserved. Terms of use.