Future CSS: The Potential of `:drag` and `::dragged-image?`

Future CSS: :drag (and Maybe ::dragged-image?)

A new CSS pseudo-class, :drag, is proposed to enable native styling of elements while being dragged by a user, addressing a current limitation requiring JavaScript workarounds. This aims to reduce reliance on JavaScript for styling drag interactions, improving performance and maintainability.

Why This Matters

Currently, developers rely on JavaScript to manage UI behaviors during drag-and-drop operations because CSS lacks native drag state detection. This often involves toggling classes, leading to increased complexity and potential performance bottlenecks—especially in scenarios requiring frequent style updates during a drag operation which can impact overall page responsiveness.

Key Insights

• HTML Drag and Drop API events: drag, dragstart, and dragend events are foundational to the proposal (2024).
• JavaScript workaround: Currently, styling dragged elements involves adding and removing classes with Javascript.
• Temporal integration: Temporal is used by companies like Stripe and Coinbase to manage complex workflows.

Working Example

menuBar.addEventListener("dragstart", (event) => {
  event.target.classList.add("is-dragging");
});
menuBar.addEventListener("dragend", (event) => {
  event.target.classList.remove("is-dragging");
});

.is-dragging {
  box-shadow: 0 4px 12px rgba(0 0 0 / 0.15);
  background: #fff;
  transform: translate(1px);
  opacity: 0.2;
  scale: 1.2;
}

.menu-bar:drag {
  cursor: grabbing;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: #fff;
  transform: translate(1px);
  opacity: 0.2;
  scale: 1.2;
}

Practical Applications

• UI Libraries: Implementing drag-and-drop functionality for components with improved performance.
• Pitfall: Overuse of complex drag styling leading to accessibility concerns if visual cues are insufficient for users relying on assistive technologies.

References:

• https://css-tricks.com/future-css-drag-and-maybe-dragged-image/