[csswg-drafts] CSS `position: drag` (#11383)

yashrajbharti has just created a new issue for https://github.com/w3c/csswg-drafts:

== CSS `position: drag` ==
## 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.

<img width="1238" alt="Youtube" src="https://github.com/user-attachments/assets/cb1384b0-d78a-43fa-9b2c-50080fddb1e1" />
<img width="1206" alt="Figma" src="https://github.com/user-attachments/assets/4bf98520-e61c-493f-a809-f87a798498cd" />
<img width="1682" alt="Google Labs" src="https://github.com/user-attachments/assets/7fb8aee1-799b-49a2-96a5-7fff9a6a8738" />


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

```css
/* Enable draggable behavior */
.element {
  position: drag;
}
```

### Behavior

1. **Draggable Activation**: `position: drag` makes an element draggable.
2. **Dynamic Position Updates**: Updates `top` and `left` values 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](https://codepen.io/driftblaze/pen/emOgZaj))

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

## Related Work

I have been following the work on [CSS Cursor Positioning](https://github.com/w3c/csswg-drafts/issues/10574) 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.



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11383 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 16 December 2024 22:52:26 UTC