2

I am fighting this issue for a while now and all my searches leads to use preventDefault() in my onmousedown listener (to prevent text selection), but when I do so, it is also disabling my dragging (can't drag elements even if they have the draggable="true" attribute).

what is the best way to allow dragging elements (using the attribute draggable="true") and when dragging them and hovering with the mouse over some text (p, h1 ,h2...) prevent the text background form being blue (you know - the default when clicking and marking text)

Thanks. Jim.

Nain
  • 1,204
  • 1
  • 12
  • 17
JimmyBoy
  • 351
  • 4
  • 14
  • 1
    Is this perhaps the answer for you? http://stackoverflow.com/questions/5429827/how-can-i-prevent-text-element-selection-with-cursor-drag – trainoasis Jul 30 '15 at 08:08
  • I understand now that my problem is a bit trickier.. I saw this question before and tried it, it does solve this issue, but not my issue. this will lead me to the solutions though :) Thanks @trainoasis – JimmyBoy Jul 30 '15 at 08:30

2 Answers2

1

Found the solution.

Just add onmousedown="mouseDown()" to your element and this method:

function mouseDown() {
   window.getSelection().removeAllRanges();
}

This will unselect all previous selections and only highlight the current element being dragged.

Dror Bar
  • 686
  • 2
  • 10
  • 19
0

The thing that eventually solved my issue was very simple and in CSS,

you can see the answer here

Community
  • 1
  • 1
JimmyBoy
  • 351
  • 4
  • 14
  • 1
    That's not a solution, I don't want to disable text selection, I just want to disable selected text from being dragged together with the draggable or otherwise clear selection before dragging. – Dror Bar Oct 16 '20 at 14:40