互動

用戶拖曳user-drag

Controlling whether the user can drag element.

Class	Declarations
`user-drag:auto`	`-webkit-user-drag: auto; user-drag: auto;`
`user-drag:element`	`-webkit-user-drag: element; user-drag: element;`
`user-drag:none`	`-webkit-user-drag: none; user-drag: none;`
`user-drag:<value>`	`-webkit-user-drag: <value>; user-drag: <value>;`

Examples

Use user-drag:none to prevent images, icons, and decorative media from being dragged out of the interface.

<img class="user-drag:none" src="/images/product.png" alt="Product preview">

Generated CSS

@layer utilities {    .user-drag\:none {        -webkit-user-drag: none;        user-drag: none    }}

Use user-drag:element only when the element is intended to participate in native drag behavior.

<div class="user-drag:element">    Draggable asset</div>

Use user-drag:auto when a component variant should restore the default drag behavior.

<img class="user-drag:none user-drag:auto@sm" src="/images/file.png" alt="File">

Apply styles based on different states using selectors and conditional queries.

<div class="user-drag:none:hover user-drag:auto@sm user-drag:none@print">...</div>

Setting how an element's region can be manipulated by a touchscreen user.

Controlling whether the user can select text.