CSS Drag Elements

[yashrajbharti]

Why

Creating draggable elements currently requires significant JavaScript, adding complexity and potential performance issues. A native CSS property can make this feature available directly via CSS, simplifying implementation and improving performance.

Motivation

Draggable elements are widely used in modern web applications, such as:

• Design tools: Figma allows users to drag and position elements freely.
• Media players: YouTube captions can be dragged to reposition them.
• Interactive tools: Google Labs features draggable UI components.

Currently, implementing such functionality requires JavaScript, which increases complexity, reduces performance, and can lead to inconsistencies in behavior. A native CSS solution would eliminate these issues.

Feature Breakdown

Syntax

/* Enable draggable behavior */
.element {
  drag: enabled; /* happy to discuss a different name and syntax */
}

Behavior

1. Draggable Activation: drag makes an element draggable.
2. Dynamic Position Updates: Updates top and left values (or inset-block-start and inset-inline-start) as the element moves.
3. Optional Enhancements: Future extensions like drag-axis or drag-snap could provide additional control.

Example

Hack Example: Interactive Ball (CodePen)

Current draggable behavior is achieved using resize: both as a workaround, which can also be replicated with JavaScript. With drag: enabled, similar functionality could be achieved natively in CSS.

Related Work

I have been following the work on CSS Cursor Positioning and can say it is quite close to my proposal. It complements this idea well: while their proposal introduces cursor-x and cursor-y values for animation based on cursor movement, mine focuses on user-driven dragging of elements. Together, they could offer a comprehensive set of tools for interactive designs in CSS.

[Loirooriol]

This doesn't seem like a new positioning mode. Instead, you want the browser to set top and left (or inset-block-start and inset-block-end?). But ultimately an author could want this to be based either on relative, absolute, or fixed positioning. So it can't just be a new lone position value, I would add a new property instead.

[yashrajbharti]

You're right! The more I think about it, having a separate drag property instead of a new positioning mode makes a lot of sense.
Something in the lines of:

/* Enable draggable behavior */
.element {
  position: absolute; /* or relative, fixed, etc. */
  drag: enabled;      /* New property to allow dragging */
}