DataTransfer: effectAllowed property
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
TheDataTransfer.effectAllowed property specifies theeffect that is allowed for a drag operation. Thecopy operation is used toindicate that the data being dragged will be copied from its present location to thedrop location. Themove operation is used to indicate that the data beingdragged will be moved, and thelink operation is used to indicate that someform of relationship or connection will be created between the source and droplocations.
This property should be set in thedragstart event to set the desired drageffect for the drag source. Within thedragenter anddragoverevent handlers, this property will be set to whatever value was assigned during thedragstart event, thuseffectAllowed may be used to determinewhich effect is permitted.
Assigning a value toeffectAllowed in events other thandragstart has no effect.
Value
A string representing the drag operation that is allowed. Thepossible values are:
noneThe item may not be dropped.
copyA copy of the source item may be made at the new location.
copyLinkA copy or link operation is permitted.
copyMoveA copy or move operation is permitted.
linkA link may be established to the source at the new location.
linkMoveA link or move operation is permitted.
moveAn item may be moved to a new location.
allAll operations are permitted.
uninitializedThe default value when the effect has not been set, equivalent to all.
Assigning any other value toeffectAllowed has no effect and the old valueis retained.
Examples
Setting effectAllowed
In this example we seteffectAllowed to"move" in thedragstart handler.
HTML
<div> <p draggable="true"> Select this element, drag it to the Drop Zone and then release the selection to move the element. </p></div><div>Drop Zone</div><pre></pre><button>Reset</button>CSS
div { margin: 0em; padding: 2em;}#source { color: blue; border: 1px solid black;}#target { border: 1px solid black;}#output { height: 100px; overflow: scroll;}JavaScript
function dragstartHandler(ev) { log(`dragstart: effectAllowed = ${ev.dataTransfer.effectAllowed}`); // Add this element's id to the drag payload so the drop handler will // know which element to add to its tree ev.dataTransfer.setData("text", ev.target.id); ev.dataTransfer.effectAllowed = "move";}function dropHandler(ev) { log(`drop: effectAllowed = ${ev.dataTransfer.effectAllowed}`); ev.preventDefault(); // Get the id of the target and add the element to the target's DOM const data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data));}function dragoverHandler(ev) { log(`dragover: effectAllowed = ${ev.dataTransfer.effectAllowed}`); ev.preventDefault();}const source = document.querySelector("#source");const target = document.querySelector("#target");source.addEventListener("dragstart", dragstartHandler);target.addEventListener("dragover", dragoverHandler);target.addEventListener("drop", dropHandler);function log(message) { const output = document.querySelector("#output"); output.textContent = `${output.textContent}\n${message}`; output.scrollTop = output.scrollHeight;}const reset = document.querySelector("#reset");reset.addEventListener("click", () => document.location.reload());Result
Specifications
| Specification |
|---|
| HTML # dom-datatransfer-effectallowed-dev |