CODEWITHSUNDEEP
javascripttextdrag-and-droppreventdefault
JimmyBoy
JimmyBoy

Reputation: 369

javascript disable text selection but allow dragging

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.

Upvotes: 2

Views: 2620

Answers (2)

Dror Bar
Dror Bar

Reputation: 718

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.

Upvotes: 1

JimmyBoy
JimmyBoy

Reputation: 369

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

you can see the answer here

Upvotes: 1

Related Questions