I have a web page where I have built a simple drag and drop scheme. I have used user-select:none to keep the text from being selected as I drag, and set cursor:pointer to keep the text-select bar from appearing when the user mouses over text. Unfortunately, when they hold the mouse button and drag an item around, the pointer changes to the I bar as if they were currently selecting text. Is there any way to change this behavior? Thanks!

I have a web page where I have built a simple drag and drop scheme. I have used user-select:none to keep the text from being selected as I drag, and set cursor:pointer to keep the text-select bar from appearing when the user mouses over text. Unfortunately, when they hold the mouse button and drag an item around, the pointer changes to the I bar as if they were currently selecting text. Is there any way to change this behavior? Thanks!

• javascript
• html
• css

Share Improve this question Follow asked Feb 16, 2012 at 16:08 Joshua SmithJoshua Smith 5711 silver badge44 bronze badges 1

• 1 add a class to a dragged element and set rules on it? – Madara's Ghost Commented Feb 16, 2012 at 16:10

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Is there any way to change this behavior?

Yes. You need to call prevent default on the mouse down event when you detect the user dragging the appropriate item.

Whenever I implement drag-and-drop, I place a mask over the entire page to capture the mousemove event wherever it may be. This mask has the relevant cursor set, usually cursor: move;.