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

[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