dropEffect Property

DHTML, HTML, & CSS

previous page next page

domain Property

DYNSRC Attribute | dynsrc...

DHTML Properties

Web Workshop | DHTML, HTML & CSS

dropEffect Property

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

Syntax

HTML N/A

Scripting event.dataTransfer.dropEffect[ = sCursorStyle ]

HTML	N/A
Scripting	event.dataTransfer.dropEffect[ = sCursorStyle ]

Possible Values

sCursorStyle String that specifies one of the following values:

copy Copy cursor is displayed.

link Link cursor is displayed.

move Move cursor is displayed.

none No cursor is specified. Instead, the no-drop cursor is displayed.

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

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

Remarks

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 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 duration of the drag operation.

The drag-and-drop behaviors implemented in Internet Explorer 4.0 and supported 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 with the effectAllowed property of the source object. The effectAllowed property determines which drag-and-drop operations are available from the source object for the entire document. The dropEffect property determines which drag-and-drop operations are allowed for 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 effectAllowed property must be set in one of the source drag-and-drop event handlers, such as the ondragstart event.

The recommended technique for dropping text is to add the dropEffect to the following events: ondragenter, ondragover, and ondrop.

The dropEffect property applies standard system cursors.

Example

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

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