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.