What is the -webkit-user-drag css property?

Question

I've seen this a couple places now, but can't find much information about it:

-webkit-user-drag: element 

Is this part of the standard for HTML5 Drag and Drop? Is this better/worse than using the attribute version:

<div draggable="true">my draggable element</div> 

Edit: I'm familiar with the current spec and using the draggable attribute, what I'm unclear on is exactly the CSS property *-user-drag.

Answer 1

It's a Webkit-specific property. Here's what the WebKit documentation says about it:

Making an Element Draggable

WebKit provides automatic support to let users drag common items, such as images, links, and selected text. You can extend this support to include specific elements on an HTML page. For example, you could mark a particular div or span tag as draggable.

To mark an arbitrary element as draggable, add the -webkit-user-drag attribute to the style definition of the element. Because -webkit-user-drag is a cascading style sheet (CSS) attribute, you can include it as part of a style definition, or as an inline style attribute on the element tag. The values for this attribute are listed in Table 4-1.

Values for -webkit-user-drag attribute:

• none: Do not allow this element to be dragged.

• element: Allow this element to be dragged.

• auto: Use the default logic for determining whether the element should be dragged. (Images, links, and text selections are the only elements that can be dragged.) This is the default value.

It's supported by all browsers using the WebKit rendering engine, so Chrome, newer versions of Opera, Safari, etc. Support in mobile browsers using WebKit may vary depending on the mobile OS.