Export (0) Print
Expand All
all
alt
ch
dir
id
min
rel
top
url
URL
urn
Expand Minimize

dropEffect property

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

Syntax

JavaScript

p = object.dropEffect

 

Property values

Type: String

copy

Copy cursor is displayed.

link

Link cursor is displayed.

move

Move cursor is displayed.

none

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

Remarks

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.

Examples

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. -->
<html>

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

<body>
  <h1>Example of the effectAllowed and dropEffect Properties</h1>
  <p>
    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 
    <strong>ondrop</strong>.
  </p>
  <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;"
    ondrop="fnHandleDrop()"
    ondragover="fnCancelDefault()"
    ondragenter="fnHandleDragEnter()">
    [drop text here]
  </div>
  <script>
    // 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.
      fnCancelDefault();

      // 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.
      fnCancelDefault();

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

    function fnCancelDefault() {
      // Cancel default action.
      var oEvent = window.event;
      oEvent.returnValue = false;
    }
  </script>
</body>

</html>

See also

dataTransfer
Reference
clearData
effectAllowed
getData
setData
Conceptual
About DHTML Data Transfer

 

 

Show:
© 2014 Microsoft