YouTip`, ``) draggable, you must set their `draggable` attribute to `true`.
* To learn how to handle the dragged data and drop events, please refer to tutorials on the **HTML5 Drag and Drop API**.
---
## HTML 4.01 vs. HTML5
The `draggable` attribute is a new global attribute introduced in **HTML5**.
---
## Syntax
```html
```
### Attribute Values
| Value | Description |
| :--- | :--- |
| `true` | Specifies that the element is draggable. |
| `false` | Specifies that the element is not draggable. |
| `auto` | Uses the browser's default behavior (default). |
---
## Code Examples
### Basic Example: Making a Paragraph Draggable
By default, a `HTML5 Drag and Drop Demo
`, or `
` element cannot be dragged. Setting `draggable="true"` enables the dragging visual effect. ```html
This is a draggable paragraph. Try dragging this text!
``` ### Complete Implementation: Drag and Drop To make a drag-and-drop operation fully functional, you must combine the `draggable` attribute with JavaScript event listeners (`ondragstart`, `ondragover`, and `ondrop`). ```htmlDrag the green box into the dashed rectangle:
Drag Me!
```
---
## Important Considerations
1. **Boolean-like but Enumerated**: Unlike some HTML attributes, `draggable` is an *enumerated* attribute, not a boolean one. This means you must explicitly write `draggable="true"` or `draggable="false"`. Simply writing `` is not recommended and may lead to inconsistent browser behavior.
2. **User Experience**: When making elements draggable, it is best practice to update their CSS cursor property (e.g., `cursor: move;`) to visually signal to users that the element can be interacted with.
3. **Disabling Defaults**: If you want to prevent images or links from being dragged, you can explicitly set them to `draggable="false"`.