0Pricing
JavaScript Academy · Lesson

Making Elements Draggable

Enable dragging and handle drag events.

The HTML Drag and Drop API

The native Drag and Drop API lets users grab elements and drop them elsewhere. It is event-driven: source elements fire drag events, and drop targets fire their own. No library required.

The draggable Attribute

By default only links and images are draggable. Add draggable="true" to make any element draggable.

<div draggable="true" id="card">Drag me</div>

All lessons in this course

  1. Making Elements Draggable
  2. Drop Targets and dataTransfer
  3. Visual Feedback During Drag
  4. Dragging Files into the Page
← Back to JavaScript Academy