AI Workshop: learn to build apps with AI →
Drag and Drop: Set / get the effect

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.


Set the allowed effect for the drag operation by setting the effectAllowed property in the dragstart handler. The value determines what the drop target can do with the dropped data (all values are strings):

  • none — drop not allowed
  • move — can be moved
  • copy — can be copied
  • link — can be linked
  • copyMove — can be copied or moved
  • copyLink — can be copied or linked
  • linkMove — can be moved or linked
  • all — can be copied, moved, or linked (default)

The dropEffect property indicates the type of operation; it is set by the user via modifier keys (for example, Alt on Mac to copy instead of move). You can also set dropEffect in a dragenter or dragover handler to one of:

  • none — drop not allowed
  • move — move
  • copy — copy
  • link — link

Example:

element.addEventListener('dragenter', event => {
  event.dataTransfer.dropEffect = 'move'
})

Lessons in this unit:

0: Introduction
1: Drop targets
2: Drag events
3: Dragging data
4: ▶︎ Set / get the effect
5: The data being transferred