:drop

Drag-and-Drop

The :drop pseudo-class matches any element that is a drop target, while the user is dragging an item to be dropped.

The :drop() pseudo-class is similar to :drop, but allows additional filters to be specified, to exclude some drop targets.

Use the HTML dropzone attribute to specify than an element is a drop target.

Browser Support (tested using latest versions)

Desktop
Google Chrome
No
Mozilla Firefox
No
Safari
No
Opera Browser
No
Internet Explorer
No
Mobile
Android Browser
No
Chrome for Android
No
Mozilla Firefox Mobile
No
Safari iOS
No
Opera Mobile
No
IE Mobile
No

Syntax

E:drop { /* Style properties */ }

E:drop(active || valid || invalid) {
/*
active: the current drop target for the drag operation
valid: matches if the drop target is valid for the object currently being dragged
invalid: matches if the drop target is invalid for the object currently being dragged
*/

}

Example

/* The following example adds a yellow outline to every drop target. */

:drop {
outline: 1px solid yellow;
}

/* The following example adds a yellow outline to all active and valid drop targets. Notice that there is no comma between valid and active. */

:drop(valid active) {
outline: 1px solid yellow;
}

Information is based on Selectors Level 4 - W3C Editor's Draft (last updated on May 24, 2016)
Copyright © 2015 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. W3C liability, trademark and document use rules apply.