User drag none utility class

[justingolden21]

We have select-none but users can still drag ghost images. I think adding drag-none as a utility for:

  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;

would be awesome. Thoughts?

See https://stackoverflow.com/a/32548403/4907950

[TelegramUsername]

I was looking for it in Tailwind, If it was added it would be helpful

[smithliam]

For now, you can create your own plugin or use this:
https://www.npmjs.com/package/tailwindcss-addons
https://github.com/babakfp/tailwindcss-addons/tree/main/tailwindcss-addons

[TelegramUsername]

@adamwathan please consider this in TailwindCSS

[joranmulderij]

This should actually be part of TailwindCSS. select-none is there but drag-none is not. Seems inconsistent to me.

[justingolden21]

Just came into another use case for this and googled it and got back here lol. Any chance we can consider this feature?

[justingolden21]

Solution for now:

tailwind.config.cjs

const plugin = require('tailwindcss/plugin');

plugins: [
		plugin(function ({ addUtilities }) {
			addUtilities({
				'.drag-none': {
					'-webkit-user-drag': 'none',
					'-khtml-user-drag': 'none',
					'-moz-user-drag': 'none',
					'-o-user-drag': 'none',
					'user-drag': 'none'
				}
			});
		})
	]

https://tailwindcss.com/docs/plugins#adding-utilities

https://stackoverflow.com/a/32548403/4907950

[rozsazoltan]

From TailwindCSS v4:

@utility drag-none {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-select: none;
}

[adamwathan]

@justingolden21 Any reason to not use the draggable HTML attribute? That appears to the be standard way to handle this, with -webkit-user-drag being non-standard CSS that's not in the spec.

[justingolden21]

Ooh good find, thank you!

[ZouicheOmar]

Used pointer-events-none on my img, worked for chrome and firefox

[EinfachHans]

Works, but you can't use click listeners anymore

[ecbalarain]

It worked like charm.

Suggestion: Combine it with select-none because the image is still selectable.

[MikeeNachtigall]

You can just use [-webkit-user-drag:none], which is described here.

[miruji]

You can use draggable='false' for img or a. This works for me

[lymtu]

True, but we can solve this problem by creating exclusive class attribute

in root.css

.user-drag-none {
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
}

[rozsazoltan]

Using the @utility directive is much more convenient and provides more predictable results. You won't have any CSS specificity issues.

@utility drag-none {
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
}