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!
Share Improve this question asked Feb 16, 2012 at 16:08 Joshua SmithJoshua Smith 571 silver badge4 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
2 Answers
Reset to default 5Is 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;.