effectAllowed Property

DHTML, HTML, & CSS

previous page next page

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 ]

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

Possible Values

sEffect String that specifies one of the following values:

copy Selection is copied.

link Selection is linked to the drop target by the data transfer operation.

move Selection is moved to the target location when dropped.

copyLink Selection is copied or linked, depending on the target default.

copyMove Selection is copied or moved, depending on the target default.

linkMove Selection is linked or moved, depending on the target default.

all All drop effects are supported.

none Dropping is disabled and the no-drop cursor is displayed.

uninitialized No 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.

Applies To

[ Object Name ]

Platform Version

Win16:

Win32:

Mac:

Unix:

WinCE:

Version data is listed when the mouse hovers over a link, or the link has focus.

dataTransfer