I am developing a Chrome browser extension that allows a drag & drop kind of operation everywhere on the page. However, while the user performs this operation the cursor is usually changed to the text cursor.
How can I alter that behaviour? The CSS cursor property seems to only kick in when you're not holding the mouse button down.
PS: Since, I'm developing an extension for Google Chrome, other browser do not matter to me.
I am developing a Chrome browser extension that allows a drag & drop kind of operation everywhere on the page. However, while the user performs this operation the cursor is usually changed to the text cursor.
How can I alter that behaviour? The CSS cursor property seems to only kick in when you're not holding the mouse button down.
PS: Since, I'm developing an extension for Google Chrome, other browser do not matter to me.
Share Improve this question edited May 21, 2011 at 4:44 eflorico asked May 21, 2011 at 3:04 efloricoeflorico 3,6292 gold badges32 silver badges41 bronze badges 3- You'll have to provide more information on what you're doing and how you're doing it. In my experience, the CSS cursor property looks exactly the same regardless of mouse-button state. – Sparky Commented May 21, 2011 at 3:10
- 1 @Sparky: At least in Chrome, when you hold down the primary mouse button and "drag", the cursor turns into the "I-beam". I think @eWolf wants to override this convention. – Jeremy Commented May 21, 2011 at 3:19
- 1 @Jeremy That's exactly the problem. – eflorico Commented May 21, 2011 at 4:44
2 Answers
Reset to default 3Simply override the "dragstart" message handler as well as the "selectstart"... While in the function cancel the event...
<script type="text/ecmascript">
window.addEventListener("dragstart", function(fEventObject){ CancelEvent(fEventObject); } );
window.addEventListener("selectstart", function(fEventObject){ CancelEvent(fEventObject); } );
function CancelEvent(fEventObject)
{
if (fEventObject.preventDefault) fEventObject.preventDefault();
if (fEventObject.cancel != null) fEventObject.cancel = true;
}
</script>
Could you add a css class to the body tag, that sets the cursor, then remove than class on drop?