1

I would like in css or jquery to prevent the user to drag a selected text

Here in this picture we can select the text, and copy it, ok. But then, I don't want the ability to drag this text around.

I want when I start to click & drag on the selected content, to start a new selection highlight. enter image description here

I have manage to disable the drag of the text by doing that:

$('.content').on('dragstart', function (e)
{
  e.preventDefault();
});

But then it does'nt start a new selection.

EDIT: here a video of the problem https://youtu.be/zya0L67Rm2w

it's a basic feature, but I want to be able to disable it, for ergonomy reason. I have a block of code, and I want that block of code to be easly selectable, and no draggable

Thanks.

Ugo Hed
  • 185
  • 1
  • 11

1 Answers1

0

If you preventDefault on the .content class, it works to stop dragging that starts only on the content block/selection, but as you demonstrated you can still click and drag from the whitespace around it to start a basic text dragging. It's built into the browser/operating system to behave this way.

To stop it, you also need to prevent dragging on the HTML/BODY tag (or on the page container tag, if you have a bigger container):

$('html, body').on('dragstart', function (e)
{
  e.preventDefault();
});
HBlackorby
  • 1,308
  • 1
  • 11
  • 18
  • unfortunatly, it doesn't start a new selection after that. It does stop the drag (like in my exemple), but it disable also the new selection – Ugo Hed Sep 09 '19 at 19:59
  • When it starts the drag, the script cancels the event, which means the browser is now doing nothing (and definitely not starting a new selection). To start a new selection, you have to click and select again. There's no way around this that I know of to stop all text dragging without requiring a second click to start a second selection. – HBlackorby Sep 09 '19 at 20:05
  • I already saw a website who does exactly what I want. Here it is: http://thegamedev.guru/unity-addressables-learn-workflows/ In the code section (scroll down a bit), we can select twice without having that unwanted drag. – Ugo Hed Sep 09 '19 at 20:15
  • Can I ask what you're trying to accomplish by blocking click/drag of text? Even in your example page, people can still select text, copy, and paste it elsewhere. Stopping click/drag doesn't stop the ability to copy code out of that box on thegamedev.guru. Otherwise, that site has a complex onDragStart function that is probably doing something on like 6506 of this file: http://thegamedev.guru/wp-content/plugins/wp-codemirror-block/vendor/codemirror/lib/codemirror.js?ver=5.40.2 – HBlackorby Sep 09 '19 at 21:02
  • It's for ergonomy reason: i WANT peaple to copy/past text in a block of code, but I don't want to be able to select & drag. It's for user convenience – Ugo Hed Sep 10 '19 at 07:43