DataTransferdropEffect

DataTransfer.dropEffect is a property of the DataTransfer object used in the HTML5 Drag and Drop API. It communicates the intended operation that should be performed when a draggable item is dropped on a valid drop target. The property is writable during drag events, allowing scripts to influence user feedback and the final outcome of a drop.

Values and behavior: The dropEffect property commonly takes the values 'none', 'copy', 'move', or 'link'. It is typically set in a dragover event to reflect which operation is currently selected or feasible, based on the drag source’s allowed effects. The browser may update the cursor or feedback accordingly. The allowed operations for a given drag are defined by the drag source through the DataTransfer.effectAllowed property; only permutations permitted by effectAllowed are considered valid for drop.

Usage pattern: A drop target often calls event.preventDefault() in a dragover handler to indicate that dropping is allowed, and then sets event.dataTransfer.dropEffect to one of the permitted values. During the drop event, the code inspects event.dataTransfer.dropEffect to decide how to handle the data (for example, copying data into the target, moving it from the source, or creating a link). The actual transfer action should be implemented in the drop handler, with additional validation as needed.

Notes: dropEffect is advisory and influenced by browser behavior and the source’s allowed effects. It should not be relied upon for security or data integrity; server-side or application logic should validate and perform the appropriate data handling on drop.

Compatibility: DataTransfer.dropEffect is supported in modern browsers that implement the HTML5 Drag and Drop API. For full behavior, it is typically used alongside DataTransfer.effectAllowed and DragEvent handling.