HTML draggable Attribute

The draggable attribute on an element specifies that the element can be dragged. All visual elements can be made draggable with this attribute.

Example

#

A draggable attribute on a <p> element.
The entire paragraph or just the image can be dragged. Try dragging it.

Impressionism is a 19th-century art movement characterized by relatively small, thin, yet visible brush strokes, open composition, emphasis on accurate depiction of light in its changing qualities, ordinary subject matter, inclusion of movement as a crucial element of human perception and experience, and unusual visual angles. Impressionism originated with a group of Paris-based artists whose independent exhibitions brought them to prominence during the 1870s and 1880s.

Impressionism derives its name from this painting:


'Impression - sunrise', 1872, by Claude Monet

<p draggable="true">
  <b>Impressionism</b> is a 19th-century art movement characterized 
  by relatively small, thin, yet visible brush strokes, open 
  composition, emphasis on accurate depiction of light in its 
  changing qualities, ordinary subject matter, inclusion of 
  movement as a crucial element of human perception and 
  experience, and unusual visual angles. Impressionism originated 
  with a group of Paris-based artists whose independent exhibitions 
  brought them to prominence during the 1870s and 1880s.
  <br /><br />
  Impressionism derives its name from this painting:<br /><br />
  <img src="/img/html/soleil-levant.jpg"><br />
  'Impression - sunrise', 1872, by Claude Monet
</p>

Using draggable

The draggable attribute specifies whether an element can be dragged or not.

By default, only images, link elements, and selections (e.g. selected text) are draggable.

All other element types can be made draggable with the draggable attribute.

Note:  The draggable attribute is a global attribute that can be applied to any tag.


Syntax

<tag draggable="true | false | auto" />

Values

#

Value Description
true Allows the element to be dragged.
false Prevents the element to be dragged.
auto Use the browser's default behavior. This is also the default.

Browser support

Here is when draggable support started for each browser:

Chrome
4.0 Jan 2010
Firefox
3.5 Jun 2009
Edge
9.0 Mar 2011
Opera
12.0 Jun 2012
Safari
6.0 Jul 2012

You may also like



Guides