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 allowedmove— can be movedcopy— can be copiedlink— can be linkedcopyMove— can be copied or movedcopyLink— can be copied or linkedlinkMove— can be moved or linkedall— 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 allowedmove— movecopy— copylink— 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 |