Disable dragging and selecting html elements (like links, images etc...) in Electron

electron_drag_disable.css

/**
 *   MAKE ELECTRON APP FEEL MORE NATIVE
 *
 *   * Prevent dragging all HTML elements, specially:
 *   	- images
 *   	- links (anchors)
 *
 *   * Prevent text selection
 */

*, *::after, *::before {
	-webkit-user-select: none;
	-webkit-user-drag: none;
	-webkit-app-region: no-drag;
	cursor: default;
}

That was very useful. Thank you for publishing it.

I am working on an Electron app with inside ReactJS, I tried to add these rules but I can still drag images from my OS to the app. If I do it the app becomes all black or shows the image.
Do you have some suggestions to deny the drag and drop on Electron at all?

https://github.com/ecrmnn/electron-disable-file-drop

great!

https://github.com/ecrmnn/electron-disable-file-drop

not work

Helpful, Thank you.

That cursor: default; was not so useful. All rest is aewsome. Thank you!

Thanks!

https://github.com/ecrmnn/electron-disable-file-drop

or if you don't want to include yet another npm module, paste this into your html

<script>document.addEventListener('dragover', event => event.preventDefault());document.addEventListener('drop', event => event.preventDefault());</script>

Thank you @msuchodolski and @theLMGN!

great solution. thx

Since I do want some text-selection and different cursors, I used only:

*, *::after, *::before {
	-webkit-user-drag: none;
	-webkit-app-region: no-drag;
}