A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://webplatform.github.io/docs/dom/DataTransfer/effectAllowed below:

effectAllowed ยท WebPlatform Docs

effectAllowed Summary

Gets which kinds of data transfer operations are allowed for the object. Can be set (during the dragstart event) to change the allowed operations.

Property of dom/DataTransferdom/DataTransfer

Syntax 
var effectAllowed = event.dataTransfer.effectAllowed;
event.dataTransfer.effectAllowed = newEffectAllowed;
Return Value

Returns an object of type StringString

One of the following values:

Examples

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

<!doctype html>
<html>
 <head>
  <title>Example of the effectAllowed and dropEffect Properties</title>
  <style>
#oTarget {
  background: beige;
  height: 100px;
  width: 200px;
  border: solid black 1px;
}
  </style>
  <script>


function fnHandleDragStart(e) {
  var oData = e.dataTransfer;
  
  oData.effectAllowed = "move";
}



function fnHandleDrop(e) {
  var oTarg = e.target;
  var oData = e.dataTransfer;

  
  fnCancelDefault(e);

  
  
  oTarg.textContent += oData.getData("Text");
}



function fnHandleDragEnter(e) {
  var oData = e.dataTransfer;

  
  fnCancelDefault(e);

  
  oData.dropEffect = "move";
}

function fnCancelDefault(e) {
  
  e.preventDefault();
}
function initialize() {
 var target = document.getElementById("oTarget");
 document.getElementById("oSource").addEventListener("dragstart", fnHandleDragStart, false);
 target.addEventListener("drop", fnHandleDrop, false);
 target.addEventListener("ondragover", fnCancelDefault, false);
 target.addEventListener("ondragenter", fnHandleDragEnter, false);
}

window.addEventListener("load", initialize, false);
  </script>
 </head>
 <body>
  <h1>Example of the effectAllowed and dropEffect Properties</h1>
  <p>The code in this example sets the <b>effectAllowed</b> property
to <span class="literal">move</span>. It sets the <b>dropEffect</b>
property to display the move cursor. The default action must be canceled in all events that are handled&#151;in this example,
<b>ondragstart</b>, <b>ondragover</b>, <b>ondragenter</b>, and
<b>ondrop</b>.</p>
<p>
<b>
  [not this text]
<span id="oSource">
  [select and drag this text]
</span>
  [not this text]
</b>
</p>
<p> </p>
<div id="oTarget">
[drop text here]
  </div>
 </body>
</html>

View live example

Notes

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 script can set the effectAllowed property to copy for a text field and override the Microsoft Word default of move. In the application, copy is the default effectAllowed behavior; however, anchors are set to link by default, and text fields are set to move by default.

By setting effectAllowed to none, dropping is disabled but the no-drop cursor is still displayed. To avoid displaying the no-drop cursor, cancel the returnValue of the ondragstart window.

Related specifications
HTML
Candidate Recommendation
Attributions

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4