VISUALLY ENHANCE THE DRAG-AND-DROP EXPERIENCE
With a working drag-and-drop interface, you can visually spice up the click, drag, and drop actions performed by the user. This, like all other cosmetic changes to HTML, happens in the realm of CSS:
| Event | Effect |
| dragstart | Applies the hide class; use setDragImage() to set an image under the mouse cursor. |
| dragenter | Applies the hover class. |
| dragleave | Removes the hover class. |
| dragend | Removes the hide and hover classes. |
The hide CSS class will apply to the draggable element as it is being dragged. You can do so by creating a CSS declaration that modifies the source element’s dimensions or opacity. Removing this class will automatically restore its default display properties.
The hover
Get HTML5: Your visual blueprint™ for designing rich web pages and applications now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
