Prevent Dragging an HTML Element

Sometimes users accidentally drag an HTML element into an editable area. This can be prevented by adding draggable="false" as an attribute to the element.

Examples

Draggable

<a href="https://example.com">draggable example</a>
<img src="avatar.jpg" alt="Sal" width="150" height="150" />

draggable example

Undraggable

<a draggable="false" href="https://example.com">draggable example</a>
<img draggable="false" src="avatar.jpg" alt="Sal" width="150" height="150" />

undraggable example

More Details

See MDN draggable.

See browser support for draggable at Can I Use….

Sal Ferrarello (@salcode)

Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.