You can set the desired effect of the drag operation by setting the effectAllowed property in the dragstart event. You have a few options which set how the drop target should handle the dropped element:
noneit shouldn’t be droppedmoveit can be movedcopyit can be copiedlinkit can be linkedcopyMoveit can be copied or movedcopyLinkit can be copied or linkedlinkMoveit can be moved or linkedallit can be copied, moved or linked
(all are strings).
The default is all.
The dropEffect property is used to get the type of the drag and drop operation, which this time is set by the user through the use of modifier keys. For example, on a Mac pressing the Alt key sets the drop target to copy the item instead of moving it.
This property is not read only. We can edit it in a dragenter or dragover event, to one of those string values:
noneit shouldn’t be droppedmoveit can be movedcopyit can be copiedlinkit can be linked
Example:
element.addEventListener('dragenter', event => {
event.dataTrasfer.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 |
Are you intimidated by Git? Can’t figure out
merge vs rebase? Are you afraid of screwing up
something any time you have to do something in
Git? Do you rely on ChatGPT or random people’s
answer on StackOverflow to fix your problems?
Your coworkers are tired of explaining Git to
you all the time? Git is something we all need
to use, but few of us really master it. I
created this course to improve your Git (and
GitHub) knowledge at a radical level. Launching
May 21, 2024. Join the waiting list!