dropEffect property

Sets or gets the type of drag-and-drop operation and the type of cursor to display.



p = object.dropEffect


Property values

Type: String


Copy cursor is displayed.


Link cursor is displayed.


Move cursor is displayed.


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


The dropEffect property must be used with the effectAllowed property. These properties are set on the source object of a drag-and-drop operation. The effectAllowed property determines which drag-and-drop operations are available from the source object. The dropEffect property determines which drag-and-drop operations are allowed on 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 recommended technique for dropping text is to set the dropEffect in the target object's event handler function for the following events: ondragenter, ondragover, and ondrop. The effectAllowed property must be set in one of the source object's drag-and-drop event handlers, such as the ondragstart event.

The target object of a drag-and-drop operation can set the dropEffect during the following events: ondragenter, ondragover, and ondrop. To display the cursor until the final drop, the default action of the following events must be canceled: ondragenter, ondragover, and ondrop: 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 rest of the drag operation.

Windows Internet Explorer delivers default drag-and-drop functionality for the following objects: a, img, textArea, and input type=text. When one of these objects is the source element, the default drop effect cannot be overridden by setting the dropEffect property of the target element. Instead, the default behavior of the source object must be canceled.


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

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/effectAllowedEX.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.0 Transitional//EN">
<!-- Keep this DOCTYPE. -->

  <title>Example of the effectAllowed and dropEffect Properties</title>

  <h1>Example of the effectAllowed and dropEffect Properties</h1>
    The code in this example sets the <strong>effectAllowed</strong> property 
    to <span class="literal">move</span>. It sets the <strong>dropEffect</strong>
    property to display the move cursor. The default action must be 
    canceled in all events that are handled in this example, 
    <strong>ondragstart</strong>, <strong>ondragover</strong>, <strong>ondragenter</strong>, and 
  <p><strong>[not this text] <span id="oSource" ondragstart="fnHandleDragStart()">[select and drag this text]</span> [not this text]</strong></p>
  <div id="oTarget"
    style="background: beige; height: 100px; width: 200px; border: solid black 1px;"
    [drop text here]
    // This function is called when the user 
    //  initiates a drag-and-drop operation.
    function fnHandleDragStart() {
      var oData = window.event.dataTransfer;

      // Set the effectAllowed on the source object.
      oData.effectAllowed = "move";

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

      // Cancel default action.

      // Set the content of the oTarget to the information stored
      //  in the data transfer object in the desired format.
      oTarg.innerText += oData.getData("text");

    // This function sets the dropEffect when the user moves the 
    //  mouse over the target object.
    function fnHandleDragEnter() {
      var oData = window.event.dataTransfer;

      // Cancel default action.

      // Set the dropEffect for the target object.
      oData.dropEffect = "move";

    function fnCancelDefault() {
      // Cancel default action.
      var oEvent = window.event;
      oEvent.returnValue = false;


See also

About DHTML Data Transfer