• Skip to primary navigation
  • Skip to main content
Sal Ferrarello
  • About Sal Ferrarello
  • Speaking
  • Connect
    Mastodon GitHub Twitter (inactive)
You are here: Home / Programming / Prevent Dragging an HTML Element
Speaking: Sal is one of the speakers at WordCamp Montclair on June 24, 2023 and tickets are only $25!

Prevent Dragging an HTML Element

Last updated on March 21, 2023 by Sal Ferrarello

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

Sal

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

Sal

More Details

See MDN draggable.

See browser support for draggable at Can I Use….

Sal Ferrarello
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.

Share this post:

Share on TwitterShare on FacebookShare on LinkedInShare on EmailShare on Reddit

Filed Under: Dev Tips, Programming, Solution Tagged With: HTML

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2023 · Bootstrap4 Genesis on Genesis Framework · WordPress · Log in