Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS Drag Elements #11383

Open
yashrajbharti opened this issue Dec 16, 2024 · 2 comments
Open

CSS Drag Elements #11383

yashrajbharti opened this issue Dec 16, 2024 · 2 comments
Labels

Comments

@yashrajbharti
Copy link

yashrajbharti commented Dec 16, 2024

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.
Youtube Figma Google Labs

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
Copy link
Contributor

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
Copy link
Author

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 */
}

@yashrajbharti yashrajbharti changed the title CSS position: drag CSS Drag Elements Dec 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants