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:

• none it shouldn’t be dropped
• move it can be moved
• copy it can be copied
• link it can be linked
• copyMove it can be copied or moved
• copyLink it can be copied or linked
• linkMove it can be moved or linked
• all it 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:

• none it shouldn’t be dropped
• move it can be moved
• copy it can be copied
• link it can be linked

Example:

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

Lessons in this unit: