CSS Portal
Notifications
New
CSS Analyzer & Stylesheet Stats

Analyze a stylesheet instantly: size, rules, selectors, colors, fonts, specificity, media queries and custom properties, plus common problems like !important and ID selectors.
New
CSS Difference Checker

Compare two CSS files by rules and properties, not lines. See added, removed, changed, moved and renamed rules, highlighted in both versions.
New
Duplicate CSS Remover & Merger

Remove duplicate CSS rules and properties. Merges rules with the same selector, keeps the value the browser uses, keeps fallbacks, and explains every change.
New
CSS Box Model Visualizer

See how the CSS box model works. Change content size, padding, border and margin, compare content-box and border-box, and copy the CSS.
New
Remove Empty Lines

Remove empty lines from text or lists instantly. Remove every blank line, keep one between paragraphs or trim only the start and end, and tidy trailing spaces.
New
Unused CSS Finder - Command Line Version

For a more comprehensive audit, try our command-line PHP version. It crawls every page of your site, compares your stylesheets against all of them, and produces a full report with optional cleaned CSS files.
New
CSS Logical Properties Converter

Free CSS logical properties converter. Transform margin-left, padding-top, width and more into flow-relative equivalents for RTL and i18n-ready layouts. Includes shorthand conversion and writing mode simulator.
New
Unused CSS Finder

Free tool to find and remove unused CSS. Scan HTML, CSS, and JS to get a cleaned stylesheet, byte savings, and a breakdown of every removable selector.
New
CSS Skeleton Loader Generator

Generate production-ready CSS skeleton loader components instantly. Customize card type, quantity, size, colors, border radius, and animation style
Updated
CSS Validator

CSS Validator has had a complete makeover, it now uses a newly developed CSS validation engine.
New
CSS Position Visualizer

An interactive visual reference for every CSS position value - static, relative, absolute, fixed, and sticky - plus z-index, stacking contexts, and a live layout debugger.
Favorites

HTML draggable Global Attribute

  1. Home
  2. HTML Resources
  3. HTML Global Attributes
  4. draggable
☕
Enjoying this site?

Help keep it running with a small coffee donation. Every bit of support is appreciated!

Buy us a coffee
draggable
HTML Global AttributeThis global attribute is supported by all modern browsers.
Updated 14th October 2023

Description

The draggable HTML global attribute specifies whether an element is draggable or not. It can be applied to any HTML element, but it has no effect on SVG elements.

The draggable attribute can have two values:

  • true: The element can be dragged.
  • false: The element cannot be dragged.

If the draggable attribute is not set, its default value is auto. This means that the drag behavior will be the default browser behavior: only text selections, images, and links can be dragged. For other elements, the ondragstart event must be set for drag and drop to work.

The draggable attribute is often used in drag and drop operations, where users can drag elements from one location to another. For example, you could use the draggable attribute to create a drag-and-drop list of items, or to allow users to move elements around on a canvas.

Here is an example of how to use the draggable attribute:

<div draggable="true">
  <p>This element can be dragged.</p>
</div>

When the user hovers over this element, they will see a cursor that indicates that the element can be dragged. If the user clicks and holds on the element, they can drag it to a new location.

Syntax

<element draggable="true | false | auto">

Values

  • trueIndicates that the item can be dragged.
  • falseIndicates that the item cannot be dragged.
  • autoUses browser settings.

Example

<!DOCTYPE html>

<html>

<head>

<title>Global Attribute draggable</title>

<style> 

#happy_div {

   width: 100px;

   padding: 15px;

   font-weight: 900;

   border: 1px solid red;

}

span {

   cursor: pointer;

}

</style>

</head>

   <body>

      <p>Make up the word happy (moving letters to the window):</p>

<script>

   function allowDrop(ev) {

      ev.preventDefault();

   }

   function drag(ev) {

      ev.dataTransfer.setData("Text", ev.target.id);

   }

   function drop(ev) {

      var data = ev.dataTransfer.getData("Text");

      ev.target.appendChild( document.getElementById(data));

      ev.preventDefault();

   }

</script>

   <div id="happy_div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

   <br>

   <span id="test1" draggable="true" ondragstart="drag(event)">А</span>

   <span id="test2" draggable="true" ondragstart="drag(event)">P</span>

   <span id="test3" draggable="true" ondragstart="drag(event)">H</span>

   <span id="test4" draggable="true" ondragstart="drag(event)">Y</span>

   <span id="test5" draggable="true" ondragstart="drag(event)">P</span>

   </body>

</html>
Open in editor

Browser Support

The following information will show you the current browser support for the HTML draggable global attribute. Hover over a browser icon to see the version that first introduced support for this HTML global attribute.

This global attribute is supported by all modern browsers.

Desktop

Chrome
Edge
Firefox
Opera
Safari

Tablets & Mobile

Chrome Android
Firefox Android
Opera Android
Safari iOS
Samsung Internet
Android WebView
-
Supported Unknown Not supported
☕
Enjoying this site?

Help keep it running with a small coffee donation. Every bit of support is appreciated!

Buy us a coffee
Sponsors

Copyright © 2026 CSSPortal.com - All Rights Reserved.

Contact Privacy Policy Donations