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 |