user-drag

Controlling native dragging through a vendor CSS property.

Overview

user-drag:* emits the vendor -webkit-user-drag declaration as well as its unprefixed spelling. This is a nonstandard, platform-dependent feature. Prefer the HTML draggable attribute for explicit native drag intent.

Examples

Prevent dragging media

In supporting browsers, user-drag:none prevents the image from starting a native drag. Compare it with the default image and the standard HTML draggable="false" alternative.

<!-- CSS · native image drag disabled --><img id="target" src="/demo/landscape.svg" alt="Sun above layered mountains"  width="240" height="144" class="block h:auto w:240px max-w:100% r-sm user-drag:none">

<!-- Default image · native drag allowed --><img id="target" src="/demo/landscape.svg" alt="Sun above layered mountains"  width="240" height="144" class="block h:auto w:240px max-w:100% r-sm user-drag:auto">

<!-- HTML · explicit false --><img id="target" src="/demo/landscape.svg" alt="Sun above layered mountains"  width="240" height="144" class="block h:auto w:240px max-w:100% r-sm " draggable="false">

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

The artwork is the same loaded image in every specimen. Try dragging with a pointer. Native touch dragging and long-press behavior vary by platform; computed support alone does not prove that a drag starts.

Keep draggable elements explicit

user-drag:element requests a native drag for the whole element in supporting browsers. The second specimen expresses that intent with draggable="true".

<!-- Vendor CSS request --><div id="target"  class="p-md b:1px|solid|var(--color-line-base) r-sm user-select:none         user-drag:element">  Canvas asset</div>

<!-- Standard HTML request --><div id="target" draggable="true"  class="p-md b:1px|solid|var(--color-line-base) r-sm user-select:none">  Canvas asset</div>

Neither declaration creates a drop target or a reordering feature. A complete application also needs data handling and an accessible way to perform its action without dragging.

Reset to browser behavior

Use user-drag:auto to return to the browser’s normal drag rules. Resize from none below sm to auto at the breakpoint.

<img id="target" src="/demo/landscape.svg" alt="Sun above layered mountains"  width="240" height="144"  class="block h:auto w:240px max-w:100% r-sm         user-drag:none user-drag:auto@screen@sm">

Automatic behavior depends on the element. Images and links normally have native drag behavior; an ordinary div does not become draggable merely because its value is auto.

Apply conditionally

Use a stable native checkbox to change the image’s drag policy. When Lock image dragging is checked, the parent selector applies user-drag:none to the image.

<div class="user-drag:none:has(>label>input:checked)>img">  <label class="flex items-center gap-sm mb-md">    <input type="checkbox"> Lock image dragging  </label>  <img id="target" src="/demo/landscape.svg" alt="Sun above layered mountains"    width="240" height="144" class="block h:auto w:240px max-w:100% r-sm user-drag:auto"></div>

The checkbox remains available to keyboard users. Toggle it before starting a drag; the lesson changes an actual CSS property rather than canceling a synthetic drag event.