html - Javascript: How can I set the cursor during a drag & drop operation on a website? - Stack Overflow

admin管理员组

文章数量:1390775

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.

• javascript
• html
• css
• drag-and-drop

Share Improve this question Follow edited May 21, 2011 at 4:44 eflorico asked May 21, 2011 at 3:04 efloricoeflorico 3,62922 gold badges3232 silver badges4141 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Simply 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?

本文标签： htmlJavascript How can I set the cursor during a drag amp drop operation on a websiteStack Overflow